D3 使用 'select' 和 'selectAll'

Question

我无法理解 D3 的 select 声明。

创建图表时，您通常会这样做：

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

我不明白的是select全部。此时，select 没有元素！这些元素仅在稍后根据数据附加。

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

Answer 1

您需要 select 个（不存在的）元素，因为随后会调用 .data()。此调用指示 D3 将参数中给定的数据与您 select 编辑的元素相匹配。如果像您的情况一样，selection 为空，则 D3 将为所有这些元素创建占位符元素——输入 selection。这个 selection 然后你可以像你一样使用它来附加新元素。

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

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

D3 使用 'select' 和 'selectAll'

D3's use of the 'select' and 'selectAll'

javascript

d3.js