d3.js - d3 追加和输入问题

Question

所以我在遵循一个非常简单的 d3 教程时遇到了问题。本质上，我试图通过将数据绑定(bind)到当前的 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 个新的圆形元素，而是遇到了这个错误:

Uncaught TypeError: Object [object SVGCircleElement],[objectSVGCircleElement],[object SVGCircleElement] has no method '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多变的。