# 【d3.js】要素を選択して操作するセレクタメソッド – selection

d3.jsでは、セレクタで要素（タグ）を選択し、操作を行って行きます。

セレクタとは？

何に対して、命令文を適用するかの選択対象をセレクタと呼びます。
代表的なセレクタは、htmlタグ、CSSのid名、クラス名などになります。

代表的なセレクタメソッドの例

種別	メソッド	説明
セレクタ	d3.select(“p”);	指定のセレクタ文字列に 一致する最初の要素を選択
	d3.selectAll(“p”);	指定のセレクタ文字列に 一致するすべての要素を選択
タグ指定	d3.select(“#id”);	指定のid名に 一致する要素を選択
クラス指定	d3.select(“.cls”);	指定のclass名に 一致する最初の要素を選択
	d3.selectAll(“.cls”);	指定のclass名に 一致するすべての要素を選択

要素を選択・操作するセレクタメソッドの一覧をご紹介していきます。

要素を選択するメソッド

セレクタで要素（タグ）を選択します。

// 例　id名が”name”の最初の要素にある<p>要素を全て選択
d3.select("#name").selectAll("p");

セレクタメソッドは重ねることができ（チェインメソッド）、選択後にさらに条件選択できるようになります。

メソッド	説明
d3.select(selector)	セレクタ文字列に一致する最初の要素を選択
d3.selectAll(selector)	セレクタ文字列に一致するすべての要素を選択
selection.select(selector)	選択された要素（selection）ごとに、指定されたセレクタ文字列（select(selector)）に一致する最初の子孫要素を選択
selection.selectAll(selector)	選択された要素（selection）ごとに、引数で指定されたセレクタ文字列（selectAll(selector)）に一致する全ての子孫要素を選択
selection.filter(filter)	選択された要素（selection）をフィルタリング。一致した時のみ返す。
selection.merge(other)	選択された要素をマージ。
d3.matcher(selector)	セレクタと要素が一致する場合にtrueを返す。
d3.selector(selector)	セレクタに一致する最初の子孫要素を返す。
d3.selectorAll(selector)	セレクタに一致するすべての子孫要素を返す。
d3.window(node)	指定されたノードの所有者ウィンドウを返す。
d3.style(node, name)	指定されたノード・指定された名前を持つ、スタイルのプロパティ値を返す。

要素を変更するメソッド

セレクタに続けて記述し、要素を操作します。

// 例: id名を変更
d3.select("#id").attr("idName", "newName");

メソッド	説明
selection.attr(name[, value])	選択した要素の属性（name）を指定した値（value）に設定。
selection.classed(names[, value])	選択した要素に、指定したクラス（names）を追加。
selection.style(name[, value[, priority]])	選択した要素に、指定した名前(name)・値（value）のstyleプロパティを設定
selection.property(name[, value])	選択した要素に、指定したプロパティ名（name）とその値（value）を設定
selection.text([value])	選択した要素の、テキストコンテンツを指定した値（value）に設定
selection.html([value])	valueに指定した値で、選択した要素の子要素のhtmlを置き換え
selection.append(type)	選択した要素の最後の子として、新しい要素を追加
selection.insert(type[, before])	typeで指定した要素を追加
selection.remove()	選択した要素をドキュメントから削除
selection.clone([deep])	選択した要素の複製を生成し、選択した要素の直後に挿入
selection.sort(compare)	選択した要素を、指定したソート順（compare）で並び替え
selection.raise()	選択した各要素を、親の最後の子として順番に再挿入選択した各要素を親の最初の子として順番に再挿入
selection.lower()	選択した各要素を親の最初の子として順番に再挿入
d3.creator(name)	selection.append や selection.insertによって内部的に使用され、nameで指定した新しい要素を作成

データを結合するメソッド

メソッド	説明
selection.data([data[, key]])	選択した要素に、指定したデータ配列を結合、要素を追加または削除
selection.enter()	結合で作成された新規要素を反映。
selection.exit()	余分な要素を削除
selection.datum([value])	選択した各要素にバインドされたデータを取得または設定

更新モデルについてはこちらの記事も参考ください。

イベント処理

メソッド	説明
selection.on(typenames[, listener[, capture]])	選択した要素にイベントを登録したり、登録済みのイベントを削除

まとめ

d3.jsで要素を選択して操作する、セレクタについてでした。

関連情報