D3.js 为什么只追加3段？

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

然而，尽管我的数据集大小为4，但我的段落仅追加了3次：

输出：

g
g
g

---

为什么只有3次？

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

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

---

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

以下是我怀疑您想要使用的代码

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

我很困惑，但这让我明白了这一点