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

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

1 个答案: