Charts d3条形图在追加之前选择全部

我已经学习了更多关于d3可视化库的知识，我看到了一些条形图的示例，其中有一个片段

chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());

---

我对第一行

selectAll

感到困惑。既然我们将在数据输入时追加新的矩形，那么在它们存在之前选择所有矩形的目的是什么？如果这些元素都不存在，selectAll中的内容是否重要？

它是D3语言声明性本质的一部分。文章对此进行了详细的解释。摘录：

但selectAll（“圆圈”）是怎么回事？你为什么要选择 为了创建新元素而不存在的元素？沃特

交易是这样的：与其告诉D3如何做某事，不如告诉D3 你想要什么。在这种情况下，您希望圆元素 对应于数据：您希望每个基准面有一个圆。而不是 指示D3创建圆，然后告诉D3选择 “圆圈”应与数据相对应，并说明如何到达。这 这一概念称为数据连接：

此维恩图说明了数据连接。绑定到现有数据库的数据 元素生成更新（内部）选择。未绑定数据生成 输入选择（左）和未绑定元素将生成退出 选择（右）。数据输入更新元素使用联接退出 揭示了序列背后的奥秘：

selectAll（“圆圈”）返回空选择，因为SVG 容器元素（svg）为空。这里没有魔法

空的选择被加入到数据：数据（data）。数据方法 将数据绑定到元素，生成三个虚拟选择：enter， 更新并退出。“输入”选择中包含任何位置的占位符 缺少的元素。更新选择包含现有元素， 绑定到数据。所有剩余的元素最终都会出现在的退出选择中 移除

由于所选内容为空，因此所有数据都将作为占位符节点结束 在enter（）中

这与第一个示例中的附加相同，但适用于 多个占位符；选择方法隐式地迭代 选定的元素。缺少的元素将添加到SVG容器中 通过附加（“圆”）

就这样。您希望选择的“圆圈”与数据相对应， 您描述了如何创建缺少的元素

在您的示例中，首先调用

selectAll（“rect”）

。但它返回一个空的选择

data（data）

将空选择与数据绑定。它会创建新的空选择

.enter（）

标识当连接的数组长于选择时需要添加的任何DOM元素

append（“rect”）

为每个空选择追加一个矩形，该矩形不再为空

---

这一部分有很好的解释和详细说明：

谢谢你的文章参考。我很高兴看到这个问题和答案！把我从挣扎中解救出来