制御フロー

高度な使用法として、選択にはカスタムの制御フローのためのメソッドが用意されています。

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を正確に1回呼び出し、この選択と任意の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を返し、呼び出された関数の戻り値であるnameを返さないことです。

selection.empty()

ソース · この選択に（null以外の）要素が含まれていない場合はtrueを返します。

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

selection.nodes()

ソース · この選択のすべての（null以外の）要素の配列を返します。

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

以下と同等です。

Array.from(selection)

selection[Symbol.iterator]()

ソース · 選択された（null以外の）要素に対するイテレータを返します。たとえば、選択された要素を反復処理するには

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

選択を配列に平坦化するには

const elements = [...selection];

selection.node()

ソース · この選択の最初の（null以外の）要素を返します。選択が空の場合、nullを返します。

selection.size()

ソース · この選択の（null以外の）要素の総数を返します。