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" ) ;
デモ
サンプルコードのデモを確認して下さい。編集してどのように動作するのか確認してみましょう。
構文
ノート
- 選択できる要素は1つ
- 選択できる要素は1つだけ。複数選択したい場合は
d3.selectAll()
を使う。 - 配列で取得
- 戻り値はd3.selectionオブジェクト。
selection = d3.select()
で取得した要素は、selection[0][0]
の位置に含まれる。 - そのまま利用
d3.select().style()
というようにメソッドチェーンを使用することで、選択した要素にそのまま処理を加えられる。