D3.js v5 入門|#9 円グラフにクリックイベントを追加する

前回(#7)は、d3.js(v5) を使用して円グラフを作成しました。今回は円グラフにクリックイベントを追加してみます。

次のような円グラフの各データをクリックすると、アラートメッセージを表示するように実装します。

Demoを表示

1.全体のコード

2.コードの詳細( HTML )

グラフを表示する場所を定義します。

3.コードの詳細( JavaScript )

円グラフの描画の詳細については、前回(#7 円グラフを表示する)に記載しています。
今回はクリックイベント処理に関連する部分のみ記載します。

3−1.クリックイベントを追加

イベント処理は、selection.on(typenames[, listener[, options]]) を使用して行います。
今回は次のように、全てのpath要素に対して、clickイベント発生時の処理を追加しています。

イベント発生時に実行する関数には引数が設定でき
第1引数:要素のデータ
第2引数:インデックス
第3引数:イベントが発生した要素(Node List)
が設定されます。

また、関数内では、d3.event や d3.mouse でイベントが発生した座標などの情報も取得することができます。

今回はクリックイベントを実装しましたが、typenames にはクリックイベント以外にも、ブラウザが対応している任意のDOMイベントを指定することができます。

設定できるイベントは、こちら(Event reference) を参照して下さい。

4.まとめ

円グラフにクリックイベントを追加しました。
selection.on()を使用すると、特定の要素に簡単にイベント処理を追加することができます。
ぜひ使用してみてください。