6

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

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

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

4

2 回答 2

4

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

但是 selectAll("circle") 是怎么回事？为什么必须选择不存在的元素才能创建新元素？笏。

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

此维恩图说明了数据连接。绑定到现有元素的数据会产生更新（内部）选择。未绑定的数据产生输入选择（左），未绑定的元素产生退出选择（右）。Data Enter Update Elements Exit Thinking with joins 揭示了序列背后的奥秘：

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

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

由于选择为空，所有数据最终都成为 enter() 中的占位符节点。

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

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

于 2012-12-29T00:56:03.347 回答
1

  1. 在您的示例selectAll("rect")中，首先调用。但它返回一个空选择。

  2. data(data)将空选择与数据绑定。它会创建新的空选择。

  3. .enter()标识当连接数组长于选择时需要添加的任何 DOM 元素。

  4. append("rect")为每个空选择附加一个矩形，该矩形不再为空

这部分有很好的解释和详细说明：D3.js 数据绑定，它是如何工作的？

于 2020-01-28T14:00:54.153 回答