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个新的圆形元素，而是遇到了这个错误：

Uncaught TypeError：Object [object SVGCircleElement]，[objectSVGCircleElement]，[object 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 Elements添加到其中，我就会继续遇到同样的错误。

似乎应该只是语法错误或其他东西，但我已经完成了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变量中。

d3追加并输入问题

1 个答案: