d3.select - セレクタに一致する最初の要素を1つ選択する

投稿日: / 更新日:

d3.jsのd3.select()は、セレクタで指定した条件に一致する一番最初の要素を選択する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.select( ".aaa" ) ;

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

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

デモ

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

構文

selection = d3.select( selector || node )
引数
項目説明
selectorスタイルシートと同じ方法でセレクタを指定する。
nodeノードを直接、指定する。
戻り値
項目説明
selectiond3.selectionオブジェクトが返る。選択した要素はselection[0][0]でアクセスできる。

ノート

選択できる要素は1つ
選択できる要素は1つだけ。複数選択したい場合はd3.selectAll()を使う。
配列で取得
戻り値はd3.selectionオブジェクト。selection = d3.select()で取得した要素は、selection[0][0]の位置に含まれる。
そのまま利用
d3.select().style()というようにメソッドチェーンを使用することで、選択した要素にそのまま処理を加えられる。