d3追加并输入问题

Question

所以我在遵循一个非常简单的d3教程时遇到了问题.本质上我试图通过将数据绑定到当前的svg圈元素然后调用enter.append来添加SVG圈元素如下所示:

var svg =d3.select("body").selectAll("svg");
var circle = svg.selectAll("circle");
var w=window.innerWidth;
console.log(circle);
circle.data([500,57,112,200,600,1000]);


circle.enter().append("circle")
    .attr("cy",function(d) {
        return (d)
        })
    .attr("cx", function(i){
        return (i*100)
    })
    .attr("r", function(d) {
        return Math.sqrt(d);
        })

这似乎会增加3个新的圆形元素(因为我已经创建了3个).但是,我没有添加这3个新的圆形元素,而是遇到了这个错误:

未捕获的TypeError:对象[对象SVGCircleElement],[objectSVGCircleElement],[对象SVGCircleElement]没有方法'enter'

我用段落做了基本相同的事情,它似乎工作正常:

var p =d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return "I'm number " + d + "!"; });

 //Enter    
 p.enter().append("p")
.text(function(d) { return "I'm number " + d + "!"; })
.style("color", function(d, i) {
 return i % 2 ? "#000" : "#eee";
});

但是,只要我尝试将SVG元素添加到其中,我就会继续得到相同的错误.

看起来应该只是语法错误或其他什么,但我已经完成了5万亿次代码,并且找不到任何东西.

非常感谢任何帮助,并感谢您的时间.

艾萨克

Answer 1

你想要调用enter结果circle.data而不是circle自己.

var circle = svg.selectAll("circle");
circle.data([500,57,112,200,600,1000]).enter().append("circle");

您p通过data在p变量中存储返回值,在示例中正确执行了此操作.而在您的circle示例中,您将d3.select.selectAll在circle变量中存储返回值.