Question

我无法围绕D3的选择陈述。

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

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

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

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

Answer 1

由于后续调用.data()，您需要选择（不存在）元素。此调用指示D3将参数中给出的数据与您选择的元素进行匹配。如果，在您的情况下，选择为空，D3将为所有这些选项创建占位符元素 - 输入选择。然后，您可以像使用此选项来添加新元素。

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

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