d3中的可重用图表：创建和更新选择如何工作？

Question

reusable charts中的一些histogram示例包含以下内容：

// select the svg element, if it exists
var svg = d3.select(this).selectAll("svg").data([data]);

// append the svg element, if it doesn't exist
svg.enter().append("svg") ...

...其中this是当前的DOM元素，data是绑定到它的数据。据我了解，这个习惯用法允许在第一次调用图表函数时创建图表，但如果您愿意，可以在后续调用之后“重新创建”。但是，任何人都可以详细解释这个成语吗？例如：

• 为什么.selectAll("svg")使用而不是.select("svg")？
• 为什么.empty()用于检查空选？
• 是否可以将任何单元素数组传递给.data()？ （我假设这个数组的目的只是返回输入选择。）

提前感谢您的帮助。

Answer 1

第一次调用时，没有SVG，因此.enter()选择将包含传递给它的数据。在后续调用中，.enter()选项将为空，因此不会添加任何新内容。

关于具体问题：

• .selectAll()返回一个数组，该数组可以与传递给.data()的数组匹配。
• .empty()可以使用，但没有必要 - 如果选择为空，则不会发生任何事情。检查.empty()会添加if语句并具有完全相同的效果。
• 是。有关选择的更多详细信息，请查看this tutorial。