d3.selectAll - セレクタに一致する全ての要素を選択する

投稿日: / 更新日:

d3.jsのd3.selectAll()は、セレクタで指定した条件に一致する全ての要素を取得するAPIです。

サンプルコード

<p class="aaa">class=aaa (1つ目)</p>
<p class="bbb">class=bbb (1つ目)</p>
<p class="ccc">class=ccc (1つ目)</p>
<p class="aaa">class=aaa (2つ目)</p>
<p class="bbb">class=bbb (2つ目)</p>
<p class="ccc">class=ccc (2つ目)</p>
// クラス属性値が[aaa]の要素を取得
var selection = d3.selectAll( ".aaa" ) ;

// 取得した1つ目のエレメントの文字色を赤にする (通常のJavaScript)
selection[0][0].style.color = "#f00" ;

// 取得した2つ目のエレメントの文字色を青にする (通常のJavaScript)
selection[0][1].style.color = "#00f" ;

// メソッドチェーンで[.bbb]の文字をまとめて太くする (応用)
d3.selectAll( ".bbb" ).style( "font-weight", "bold" ) ;

// メソッドチェーンで[.ccc]の文字色を1つ目は緑色、2つ目は紫色にする (高度な応用)
d3.selectAll( ".ccc" ).data(["green","purple"]).style( "color", function(d) { return d ; } ) ;

デモ

サンプルコードのデモを確認して下さい。編集してどのように動作するのか確認してみましょう。

構文

selection = d3.selectAll( selector || nodes )
引数
項目説明
selectorスタイルシートと同じ方法でセレクタを指定する。
nodes複数のノードを含む配列、またはノードリストを直接、指定する。
戻り値
項目説明
selectiond3.selectionオブジェクトが返る。取得した要素(n個目)にはselection[0][ (n-1) ]でアクセスできる。

ノート

取得できる要素は全て
条件に合う全ての要素を取得する。最初の1つだけ取得したい場合はd3.select()を使う。
配列で取得
戻り値はd3.selectionオブジェクト。selection = d3.selectAll()で取得した全要素をまとめた配列はselection[0]の位置に含まれる。n個目の要素にアクセスするにはselection[0][ (n-1) ]となる。
一括で処理
d3.selectAll().style()というようにメソッドチェーンを使用することで、取得した要素に一括で同じ処理を加えられる。
個別に処理
メソッドチェーンにdata()を挟んで、d3.selectAll().data([1,2]).style()というように、1つ目の値、2つ目の値と処理に使う値を分けられる。