Question

我一直在学习更多关于d3可视化库的知识，我已经看到了一些条形图的例子，它们的代码片段看起来像

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

我的困惑在于第一条selectAll行。在所有rects存在之前选择所有rects的目的是什么，因为我们将在数据输入上添加新的rects？如果这些元素都不存在，那么selectAll会出现什么问题吗？

Answer 1

这是D3语言的声明性质的一部分。 Thinking with Joins文章详细解释了这一点。摘录：

但是selectAll（“圈子”）是什么？你为什么要选择   为了创造新的元素而不存在的元素？ WAT。

这是交易：不要告诉D3如何做某事，告诉D3   你想要什么。在这种情况下，您需要圆形元素   对应数据：每个数据需要一个圆圈。代替   指示D3创建圆圈，然后告诉D3选择   “circle”应该与数据相对应 - 并描述如何到达那里。这个   概念称为数据连接：

这个维恩图说明了数据连接。数据绑定到现有   元素产生更新（内部）选择。产生未绑定的数据   输入选择（左）和未绑定的元素产生退出   选择（右）。数据输入更新元素退出思考加入   揭示了序列背后的神秘面纱：

selectAll（“circle”）返回自SVG以来的空选择   容器元素（svg）为空。这里没有魔法。

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

由于选择为空，所有数据最终都作为占位符节点   在enter（）。

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

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

Answer 2

在您的示例中，selectAll("rect")首先被调用。但是它返回一个空选择。
data(data)将空选择与数据绑定。它将创建新的空选择。
.enter()标识联接数组长于选择数组时需要添加的所有DOM元素。
append("rect")将矩形附加到每个不再为空的选择上

本节对此进行了很好的解释和详细说明：D3.js data binding, How it works?

d3条形图选择附加前的所有内容

2 个答案: