無法獲得D3 SVG教程中的jsfiddle

Question

工作，我想follow a d3 tutorial和I've created a JSFiddle以下代碼

var dataset = [1,2,3,4,5]; 
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", "red") 
    .attr("height", 40) 
    .attr("width", 75) 
    .attr("x", function(d, i){return i*80}) 
    .attr("y", 20); 

但是，我看到生成的圈子裏的SVG，但我不能看到他們對屏幕。任何人都可以看到我失蹤的東西嗎？

Answer 1

這裏是一個FIDDLE：

var dataset = [1,2,3,4,5]; 

sampleSVG.selectAll("circle") 
    .data(dataset) 
    .enter().append("circle") 
    .style("stroke", "gray") 
    .style("fill", "red") 
    .attr("cx", function(d, i){return (i + 1) *60}) 
    .attr("cy", 30) 
    .attr("r", 20); 

我只集中在需要變化的主要部分。你可以研究差異。基本上，你有一個圓的錯誤屬性（x和y，而不是cx和cy），並且缺少radius屬性。最後，高度和寬度不是圓形屬性。