为什么只附加3个段落？

Question

我是d3的初学者。我读到当一个$ n $实体的数据集绑定到一个元素，调用enter，然后执行操作时，这些操作将执行$ n $次。

但是，在这里，即使我的数据集大小为4，我的段落也只附加3次： http://jsfiddle.net/johnhoffman/tYr5U/

d3.select("body").data([1, 2, 3, 4]).enter().append("p").text("g");

输出：

g
g
g

为什么只有3次？

Answer 1

这是我怀疑你想要使用的代码。

d3.select("body").selectAll("p").data([1,2,3,4]).enter().append("p").text("g");

连接应该使用“p”元素，而不是“body”元素。

至于为什么它在你的例子中有三个：

数据有四个元素，绑定到单个“body”元素。默认情况下，第一个元素1绑定到现有主体（在HTML中定义）。其余3个元素绑定到不存在的“body”元素。由于只对非现有元素调用“enter（）”，因此在DOM的根上调用append操作三次。

为了证明这一点，请尝试：

d3.select("body").data([1,2,3,4]).enter().append("p").text(function(d) {return d;});

您将看到附加数据中的数字，而不是g。

令人困惑，但Circles Tutorial帮助我理解了这一点。