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

マウスイベントでグラフを変化させる

D3.jsでは要素にイベントを設定することができます。この記事ではマウスカーソルが棒に重なったとき・離れたときに色を変化させてみます。

D3.jsではイベントを追加するにはon()メソッドを使います。on()メソッドは1番目のパラメーターにイベント名、2番目のパラメーターにイベントが発生したときに実行する関数を指定します。この関数はイベントハンドラといいます。on()メソッドにはブラウザで設定できるイベントであれば何でも設定できます。

on()メソッドに設定できるイベントには下記のような物があり、いずれも文字列で指定します。

イベント名 詳細
click クリックしたときのイベント
dblclick ダブルクリック時のイベント
mouseover マウスが乗った時のイベント
mouseout マウスが離れた時のイベント
mousemove マウスが移動したときのイベント
keydown キーダウンイベント
keyup キーアップイベント
change ちゃん時(内容が変わった時)イベント
load 読込完了時のイベント

on()メソッドで設定したイベントが発生すると、設定した関数(イベントハンドラ)が呼び出されます。グラフの棒の色を変化させる処理をしてますが、どの棒にマウスが重なったかはD3.jsでは、d3.select(this)とかくと、イベントが発生した要素をを把握することができます。要素を指定できれば、style()メソッドを使い、プロパティ名と値を設定するだけです。

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

コメント

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