无法让d3 svg教程在jsfiddle中工作

Question

我正在尝试使用遵循d3教程和我创建了一个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

这是一个小提琴

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属性。最后，高度和宽度不是圆圈属性。