6

一些可重复使用的图表示例，例如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()吗？（我假设这个数组的目的只是返回输入选择。）

提前感谢您的帮助。

4

1 回答 1

7

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

关于具体问题：

  • .selectAll()返回一个数组，然后可以将其与传递给的数组匹配.data()。
  • .empty()可以使用，但没有必要 - 如果选择为空，则不会发生任何事情。检查.empty()将添加一个if语句并具有完全相同的效果。
  • 是的。例如，查看本教程以获取有关选择的更多详细信息。
于 2012-12-27T23:44:56.210 回答