【D3.js】ノードをドラッグできる静的なForceレイアウト

最終更新日

Draggable_Static_Force_Layout

アニメーションForceレイアウト

D3.jsのForceレイアウトは、tickイベント内でノードとリンクの描画をアップデートすることで、簡単にアニメーションが行えます。

example

スタティックForceレイアウト

しかし用途によっては、アニメーションを行わず静的なグラフとして表示したい場合があります。
その場合はtickイベントを使わず、forceオブジェクトのtickメソッドを実行することで描画ステップを進め、好みのところでstopメソッドを実行しアニメーションを止めることで静的なグラフとして表示できます。

example

スタティックForceレイアウト(ドラッグ可能)

しかし、この場合アニメーションが停止しているため各ノードをドラッグしても動きません。
ノードを静止させたままドラッグに対応させるには、ノード要素に束縛されたデータのfixedプロパティの値をtrueに設定します。

example