D3.js v4/v5 force simulation ノードに複数のsvg要素を含める方法

2018-02-06

d3.drag svg要素の同時ドラッグ (v4/v5対応)

d3.jsでノードに複数のsvg要素を含め、テキストなどの要素を同時にドラッグする方法を解説します。

サンプルデモ

サンプルコード

解説

本サンプルプログラムはforceSimulationを使っています。forceSimulationの詳細についてはこちらを参照ください。

プログラムのハイライト部分を説明します。

まず、グループ要素を表す"g"要素を作成します。"g"要素にノード用のデータ配列を割り当て、ドラッグイベントを登録します。

その後、"g"タグの子要素として"circle"と"text"を設定します。"g"要素にノードのデータ配列が割り当てられているので、参照して使います。さらに"circle"と"text"の子要素として"title"も設定可能です。サンプルデモのノードのにカーソルを合わせるとtitleの文字列が表示されます。(※タブレットやスマートフォンでは表示されません。)

"text"のスタイルとして設定している"text-anchor"は横方向のテキスト位置で、"start"、"middle"、"end"が設定できます。"dominant-baseline"は縦方向の位置です。
また、forceSimulationのステップ更新時にsvg要素の位置を次のように変更します。

forceSimulationを用いず、Dragだけの動作の場合は、イベント関数を下記のように変更します。

まとめ

わかってしまえば簡単です。クラスター(円のかたまり)を作ったり、オブジェを作ったりいろいろ応用ができそうです。