从教程例如

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圈使用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/

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