D3.js v4/v5 force simulation ラジアルフォース – サンプル

2018-02-05

D3.js forceSimulationのforceRadialのデモです (v4/v5対応)。要素をサークル状に配置することが可能です。

 サンプルデモ

サンプルプログラム

解説

基本は ノード相互作用のサンプルと同じです。3. forceSimulation設定のみ解説します。

3. forceSimulation設定

forceSimulation.force()で設定できるパラメータをまとめました。

"r" : ラジアルフォース

 radius サークル半径。値が指定されていない場合は現在の設定値を返します。
 x サークルの中心x座標。デフォルトは0。
 y サークルの中心y座標。デフォルトは0。
 strength サークル上の位置にノードが移動する速さです。1ステップで距離×strengthの値分変化します。1.0以上の数値は非推奨です。0.0~1.0の小数点で設定します。デフォルトは0.1。

まとめ

この重力場は、相関分析などの因果関係の結果を表示するようなリンクが複雑に絡み合っている場合などの表示に役立ちます。