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

マウスイベントでグラフの色を変更する

前回のまでの記事で、HTML上にあるボタンをクリックして
グラフを変化させました。D3.jsではSVG要素にもイベントを
設定することができます。
SVG要素にイベントを設定する場合もon()メソッドを使います。

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

今回は、棒グラフをクリックしたら棒グラフの色を緑に変更します。
on()メソッドもメソッドチェーン内に書くことができます。

D3.jsでは、d3.select(this)とすることで、クリックされた要素そのものを
指定できます。要素を指定したらスタイルを変更します。
スタイルの指定はattr()メソッドを使うこともできますが、
style()メソッドの第1引数に、スタイルプロパティ名、第2引数に
設定する値を指定します。

コメント

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