我无法理解 D3 的 select 语句。
创建图表时,您通常会执行以下操作:
svg.selectAll("rect")
.data(my_graph_data)
.enter()
.append("rect")
..//etc.
我不明白的是selectAll。 此时,没有可供选择的元素! 这些元素仅在稍后根据数据附加。
或者我应该从右到左阅读这些 D3 语句吗? 在那种情况下,为什么我需要选择元素?
最佳答案
您需要选择(不存在的)元素,因为随后调用了 .data()
。此调用指示 D3 将参数中给定的数据与您选择的元素相匹配。如果像您的情况一样,选择为空,D3 将为所有这些元素创建占位符元素——输入选择。然后,您可以使用此选择来附加新元素。
无论您的 SVG 中已有什么,此 .selectAll(...).data(...)
模式都是一致的。只要您处理所有三个(输入、更新、退出)选择,它就会始终执行预期的操作。在初始选择中,可能没有元素、所有数据的元素或介于两者之间的某个位置。
从技术上讲,您不必必须在最初添加新元素时使用此模式,它只会使代码更加一致。特别是,您可以在将使用新数据更新 SVG 的函数中使用此模式,而不管其状态如何(即最初以及获取和显示新数据和更改数据时的工作方式相同)。
关于javascript - D 3's use of the ' 选择'和 'selectAll',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28515843/