D3.js v4/v5 force simulation 関連ノード/リンクをハイライトする方法

2018-02-08

D3のforceSimulationでクリックした要素に関連する要素とリンクをハイライトする方法を紹介します。
本デモは、こちらのデモにクリック時のハイライト機能を加えたものです。コードのハイライト部分のみ説明します。その他の部分はこちらを参照ください。

サンプルデモ (ノードをクリックしてください)

サンプルコード

解説

 0. スタイル設定

クリックした際に追加するスタイルを設定しておきます。

2. svg要素を配置 – クリックイベントの登録

クリック時のイベントをonメソッドでノード要素に登録します。”click”イベントを登録していますが、タブレットやスマートフォンの”touch”イベントにも自動で対応してくれます。

クリック時のイベント関数では、始めにclassedメソッドを使ってすべてのハイライトを解除します。classedメソッドは、引数にクラス名(※頭に「.」をつけないように注意)と、booleanの二つの引数を取り、falseの際はクラスを解除、trueの際は登録します。trueの際にすでに同じ名前のクラスが登録されている場合は何もしません。

クリックしたノード要素にselectedクラスを追加した後、filterメソッドとeachメソッドを使ってクリックしたノード要素がつながっているリンクとノードを探索してクラスを追加していきます。

まとめ

今回は、解説のためにクリックごとに全要素を探索するアルゴリズムにしていますが、始めにノード用のデータnodesDataにつながっている要素とリンクを配列として登録しておけば計算時間を短縮することができます。また、d3.dragもそうですが、自動的にタッチパネルに対応してくれています。forceSimulationの使い方はこちらを参照ください。