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

円グラフにクリックイベントを追加する方法について記載しています。
円グラフの作成方法は、こちら(#7)を参照してください。

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

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()を使用すると、特定の要素に簡単にイベント処理を追加することができます。
ぜひ使用してみてください。