我一直在了解有关 d3 可视化库的更多信息，并且我看到了一些条形图示例，它们的 sn-p 看起来像
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());
我的困惑在于第一行selectAll。因为我们将在数据输入上附加新的矩形，所以在它们存在之前选择所有矩形的目的是什么？如果这些元素都不存在，那么 selectAll 中的内容是否重要？
【问题讨论】：
它是 D3 语言声明性的一部分。 Thinking with Joins 文章详细解释了它。摘录：
但是 selectAll("circle") 是怎么回事？为什么一定要选择 不存在的元素是为了创建新元素？瓦特。
交易是这样的：与其告诉 D3 如何做某事，不如告诉 D3 你想要什么。在这种情况下，您希望圆形元素 对应于数据：每个数据需要一个圆圈。代替 指示 D3 创建圆圈，然后告诉 D3 选择 “圆圈”应该对应于数据——并描述如何到达那里。这个 概念被称为数据连接：
这个维恩图说明了数据连接。绑定到现有的数据 元素产生更新（内部）选择。未绑定数据产生 进入选择（左），未绑定的元素产生退出 选择（右）。数据输入更新元素退出思考与连接 揭示序列背后的奥秘：
selectAll("circle") 返回空选择，因为 SVG 容器元素 (svg) 为空。这里没有魔法。
空选择加入数据：数据（数据）。数据方法 将数据绑定到元素，产生三个虚拟选择：回车， 更新并退出。输入选择包含任何占位符 缺少元素。更新选择包含现有元素， 绑定到数据。任何剩余的元素最终都会出现在退出选择中 删除。
由于选择为空，所有数据最终都作为占位符节点 在 enter() 中。
这与第一个示例中的附加相同，但适用于 多个占位符；选择方法隐式迭代 选定的元素。缺少的元素被添加到 SVG 容器中 通过追加（“圆圈”）。
原来如此。您希望选择“圆圈”对应于数据， 并且您描述了如何创建缺失的元素。
【讨论】：
在您的示例中，首先调用 selectAll("rect")。但它返回一个空选择。
data(data) 会将空选择与数据绑定。它会创建新的空选择。
.enter() 标识当连接数组长于选择时需要添加的任何 DOM 元素。
append("rect") 为每个空选择附加一个矩形，该矩形不再为空
这部分有很好的解释和详细说明：D3.js data binding, How it works?
【讨论】：