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

Question

一些可重用的图表示例(例如直方图)包括以下内容:

// 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语句并具有完全相同的效果.
• 是.有关选择的更多详细信息,请查看本教程.