5

下面的代码是为了绘制五个相邻的圆圈

<head>
<script type='text/javascript' src='jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script src="bootstrap.min.js"></script>

<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<link href="sticky-footer.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>

<body>
  <div id="viz"></div>

<script type="text/javascript">
    var dataset = [],
    i = 0;

    for(i=0; i<5; i++){
        dataset.push(Math.round(Math.random()*100));
    }        

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 400)
        .attr("height", 400);    

    sampleSVG.selectAll("circle")
        .data(dataset)
        .enter().append("circle")
        .style("stroke", "gray")
        .style("fill", "black")
        .attr("height", 40)
        .attr("width", 75)
        .attr("x", 50)
        .attr("y", 20);

  </script>
 </html>

这不是我的代码，我只是从这个网站 http://christopheviau.com/d3_tutorial/复制的

问题是这段代码没有画任何圆圈。虽然当我尝试使用 chrome 的工具检查元素时，我发现圆圈在那里但它们不可见。

我认为原因是圆圈的白色，尽管笔划不是。然而改变颜色并没有真正的用处。

问题是 Dreamweaver 并没有像它对 HTML 或 JavaScript 那样真正有帮助。

对这个问题的解决有什么建议，或者对编辑有什么建议吗？

4

2 回答 2

12

看起来您举了一个生成矩形并将其更改为圆形的示例，但圆形没有 x、y、height 和 width 属性，它们具有cx、cy 和 radius 属性。

sampleSVG.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "black")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 20);

将在另一个之上绘制多个圆圈。

于 2013-08-15T10:32:15.050 回答
4

@罗伯特·朗森感谢罗伯特·朗森

如果你想避免圆圈之间的重叠这里是代码

<script type="text/javascript">
    var dataset = [],
    i = 0;

    for(i=0; i<5; i++){
        dataset.push(Math.round(Math.random()*100));
    }

    var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 500)
    .attr("height", 300);    

    sampleSVG.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", function(d, i){return 50 + (i*80)})
    .attr("cy", 120);
</script>
于 2013-08-15T11:00:22.223 回答