html – 使用D3绘制圆圈

以下代码用于绘制彼此相邻的五个圆圈

<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那样真正起作用.

有关解决此问题的任何建议,或对编辑器的任何建议？

解决方法

看起来你举了一个例子,生成了矩形并将其改为圆形,但圆圈没有x,y,高度和宽度属性,它们有 cx,cy and radius attributes instead.

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

将多个圆圈一个在另一个上面绘制.

html – 使用D3绘制圆圈

解决方法

相关文章