§01-11Data Visualization
relationship graph (force-directed)
ノードとエッジの関係を力学配置で描く。
人や概念のつながりを俯瞰し、密に結びついた群や孤立した点を見つける。関係の全体像を眺めたいときに向く。
実装のポイント
ノード間の斥力とエッジのばねを反復計算して配置を収束させる。d3-force などを使い、tick ごとの再描画は requestAnimationFrame にまとめる。
- 特徴
- チャート
- アニメーション
- デモで使っているもの
- motion
- shadcn/ui
- lucide-react
- requestAnimationFrame
- SVG
- Pointer Events