Question

我是d3的新手并且一直在关注本教程：http://christopheviau.com/d3_tutorial/

我坚持使用'绑定数据'示例 - 它非常简单，但代码不会产生任何结果。我在这里戳了一下，但没有找到列出的问题，所以我想我会问。

以下是代码：

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", 75);

sampleSVG.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("height", 40)
    .attr("width", 75)
    .attr("x", function (d, i) {
        return i * 80
    })
    .attr("y", 20);

网站上的其他示例工作正常。

提前致谢 - 任何想法都会受到赞赏。

Answer 1

不幸的是，教程中列出的代码不正确。 svg元素“circle”由三个属性指定，“cx”，圆心的x轴坐标，“cy”，圆心的y轴坐标，以及“r”，半径圆圈。我从w3规范中获得了SVG circle的信息。

我建议您检查教程页面中的JavaScript，以帮助解决任何其他不一致问题。这是：

<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("#viz5")
     .append("svg")
     .attr("width", 400)
     .attr("height", 100);

   sampleSVG.selectAll("circle")
     .data(dataset)
     .enter().append("circle")
     .style("stroke", "gray")
     .style("fill", "white")
     .attr("r", 40)
     .attr("cx", function(d, i){return i*80+40})
     .attr("cy", 50)
     .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
     .on("mouseout", function(){d3.select(this).style("fill", "white");})
     .on("mousedown", animateFirstStep);

   function animateFirstStep(){
      d3.select(this)
        .transition()
        .delay(0)
        .duration(1000)
        .attr("r", 10)
        .each("end", animateSecondStep);
    };

    function animateSecondStep(){
      d3.select(this)
        .transition()
        .duration(1000)
        .attr("r", 40);
    };
</script>

我还创建了一个JSFiddle，您可以利用它来获得本教程的作者试图传达的基本思想，关于利用d3.js数据，here。

Answer 2

svg circle使用cx，cy和r - 而不是x，y，height和width。我更正了下面的示例代码：

var dataset = [];

for(var 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", "black")
    .attr("r", 10)
    .attr("cx", function (d, i) {
        return i * 80 + 10;
    })
    .attr("cy", function (d, i) {
        return  d;
    });

http://jsfiddle.net/q3P4v/7/

svg圈子上的MDN：https://developer.mozilla.org/en-US/docs/SVG/Element/circle

绑定教程示例中的数据

2 个答案: