D3对“ select”和“ selectAll”的使用

Question

我不能把头放在D3的select语句周围。

创建图形时，通常会执行以下操作：

svg.selectAll("rect")
  .data(my_graph_data)
  .enter()
  .append("rect")
  ..//etc.

我不明白的是selectAll。 此时，没有任何元素可供选择！ 元素仅在以后根据数据附加。

还是应该从右到左阅读这些D3语句？ 在那种情况下，为什么我需要选择元素？

Answer 1

由于随后调用了.data() ，因此需要选择（不存在）元素。 此调用指示D3将参数中给出的数据与所选元素进行匹配。 如果您选择的内容为空，则D3将为所有元素创建占位符元素-enter选择。 然后，您可以使用此选择来附加新元素。

无论您的SVG中已有什么，此.selectAll(...).data(...)模式都是一致的。 只要您处理所有三个（输入，更新，退出）选择，它将始终执行预期的操作。 在初始选择中，可能没有元素，所有数据的元素或两者之间的某个位置。

从技术上讲，你没有开始添加新元素时，使用这种模式，它只是使代码更一致。 特别是，您可以在一个函数中使用此模式，该函数将使用新数据更新SVG，而不管其状态如何（即，最初的工作方式以及获取和显示新的和更改的数据时的工作方式相同）。