0

我对 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);

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

在此先感谢 - 任何想法将不胜感激。

4

2 回答 2

0

svg 圆使用 cx、cy 和 r - 而不是 x、y、高度和宽度。我已经更正了下面的示例代码：

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

于 2013-04-27T04:18:43.687 回答
0

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

我建议检查教程页面中的 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 数据的基本思想，请点击此处。

于 2013-04-27T04:08:06.583 回答