8

所以我在遵循一个非常简单的 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 个新的圆形元素，而是遇到了这个错误：

未捕获的类型错误：对象 [object SVGCircleElement]、[objectSVGCircleElement]、[object SVGCircleElement] 没有方法“输入”

我对段落做了基本相同的事情，它似乎工作正常：

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 万亿次，并且找不到任何东西。

非常感谢您的任何帮助，并感谢您抽出宝贵的时间。

艾萨克

4

1 回答 1

16

你想调用enter结果circle.data而不是circle它本身。

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

通过将返回值存储在变量中，您在p示例中正确地做到了这一点。而在您的示例中，您将返回值存储在变量中。datapcircled3.select.selectAllcircle

于 2012-07-26T19:05:49.377 回答