從教程例如

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