控制流

对于高级用法，选择提供了自定义控制流的方法。

selection.each(function)

来源 · 为每个选定的元素按顺序调用指定的 function，传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素 (nodes[i])。此方法可用于为每个选定元素调用任意代码，并且对于创建访问父级和子级数据的上下文很有用，例如

parent.each(function(p, j) {
  d3.select(this)
    .selectAll(".child")
      .text(d => `child ${d.name} of ${p.name}`);
});

参见 大小相同的多个甜甜圈 以获取示例。

selection.call(function, ...arguments)

来源 · 只调用一次指定的 function，传入此选择以及任何可选的 arguments。返回此选择。这等效于手动调用函数，但便于方法链接。例如，要在可重用函数中设置多种样式

function name(selection, first, last) {
  selection
      .attr("first-name", first)
      .attr("last-name", last);
}

现在说

d3.selectAll("div").call(name, "John", "Snow");

这大致等效于

name(d3.selectAll("div"), "John", "Snow");

唯一的区别是 selection.call 始终返回 selection，而不是调用 function 的返回值，name。

selection.empty()

来源 · 如果此选择不包含任何（非空）元素，则返回 true。

d3.selectAll("p").empty() // false, here

selection.nodes()

来源 · 返回此选择中所有（非空）元素的数组。

d3.selectAll("p").nodes() // [p, p, p, …]

等效于

Array.from(selection)

selection[Symbol.iterator]()

来源 · 返回选定（非空）元素的迭代器。例如，要迭代选定的元素

for (const element of selection) {
  console.log(element);
}

要将选择扁平化为数组

const elements = [...selection];

selection.node()

来源 · 返回此选择中的第一个（非空）元素。如果选择为空，则返回 null。

selection.size()

来源 · 返回此选择中所有（非空）元素的总数。