スポンサーリンク
スポンサーリンク

複数の図形を操作する

D3.jsでは複数の図形を操作するにはselectAll()メソッドを使います。
selectAll()メソッドの引数には要素名、CSSクラス名を指定します。
該当する要素があれば、それらすべてを戻り値として返します。
メソッドチェーン利用時は、該当する要素すべてに対して処理が
行われます。

前回の記事で、特定のCSSクラス名を持つrect要素のスタイルを変更
しましたが、select()メソッドで変更できるのは最初に該当したもの
だけでした。selectAll()を使えば該当するCSSクラス名をもつ
rect要素のスタイルが全て変更できます。

selectAll()メソッドを使った場合、複数の要素が返されますが、
スタイルなどを設定するために繰り返し処理を書かなくて良いです。

サンプルコードの実行結果はこちら

特定の要素を操作する

select()メソッドは1つの要素を、selectAll()メソッドは複数の要素を
操作できます。じゃあ、特定の位置(4番目や7番目等)にあるrect要素を
操作するには・・・結論をいうと、
d3.jsでは、attr()メソッドやstyle()メソッドの第2引数に関数を
指定することで、繰り返し処理に介入できます。関数は要素を
1つ処理するたびに呼び出されます。for文やeach()メソッドで1つずつ
処理するのと同様の事ができます。

実際にやってみます。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました