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

Question

我一直在学习有关 d3 可视化库的更多信息，并且我看到了一些条形图示例，其中的片段看起来像

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

我的困惑在于第一selectAll行。因为我们将在数据输入时附加新的 rect，所以在它们存在之前选择所有 rect 的目的是什么？如果这些元素都不存在， selectAll 中的内容是否重要？

Answer 1

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

\n\n

\n

但是\xe2\x80\x99s 与 selectAll("circle") 是什么？为什么必须选择不存在的元素才能创建新元素？瓦特。

\n\n

这里的\xe2\x80\x99 是这样的：不要告诉 D3 如何做某事，而是告诉 D3\n 你想要什么。在这种情况下，您希望圆形元素\n 与数据相对应：您希望每个数据有一个圆形。然后，告诉 D3 选择的“圆”应对应于 data\xe2\x80\x94 并描述如何到达那里，而不是指示 D3 创建圆。这个概念称为数据连接：

\n\n

此维恩图说明了数据连接。绑定到现有元素的数据会生成更新（内部）选择。未绑定数据产生进入选择（左），未绑定元素产生退出选择（右）。数据输入更新元素退出思考连接\n揭示了序列背后的奥秘：

\n\n

selectAll("circle") 返回空选择，因为 SVG\n 容器元素 (svg) 为空。这里没有魔法。

\n\n

空选择连接到数据：data(data)。data 方法将数据绑定到元素，产生三个虚拟选择：输入、更新和退出。输入选择包含任何缺失元素的占位符。\n 更新选择包含绑定到数据的现有元素。任何剩余元素最终都会出现在退出选择中以进行删除。

\n\n

由于选择为空，所有数据最终都在 Enter() 中作为占位符节点\n。

\n\n

这与第一个示例中的附加相同，但应用于多个占位符；选择方法隐式迭代所选元素。缺失的元素通过append("circle") 添加到SVG 容器\n。

\n\n

这样\xe2\x80\x99就可以了。您希望选择的“圆圈”与数据相对应，\n 并且您描述了如何创建缺失的元素。

\n

\n