参考 D3をはじめよう
参考 Force Layout
forceレイアウトのスケルトン
forceレイアウトではオブジェクトに力が作用してその結果をシミュレートできる
forceでは、デフォルトで指定したサイズの中心に向かって重力が設定されていて、対象のノードは中心に向かう力が働く
tickごとの座標計算のときに条件ごとに座標にプラスマイナスをすればノードの種類に応じて分類することもできる Multi-Foci Force Layout
そのほかノード同士の力の作用はchargeで設定する.chargeはマイナスになると斥力になる.デフォルトでは-30となっている
またノードはリンクでつなぐことができる.リンク同士では見た目通り張力が働く.リンクの距離はlinkDistanceで設定できる
zoom＆pan
d3.jsではsvgを使ってGoogle Mapライクな操作感も実現できる.ドラッグでスクロール、ホイールで縮小拡大.viewBoxという仕組みを使っている
またマウスイベントを設定していて、rectをクリックするとそのrectは赤くなってforceシミュレーションからはずれる
これはnodeオブジェクトのfixedフラグを設定すればOK
参考ページ D3 Example: zoom, pan, and axis rescale
参考ページ 10分でわかるSVG 基礎編
