d3.js - 为什么只附加了 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 的根上被调用了 3 次。

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

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

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

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