D3.js

d3.jsで力指向グラフを使って遊ぶ~force layout & zoom & pan

投稿日:

参考 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 基礎編

-D3.js
-,

執筆者:

関連記事

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

参考(というかほぼそのまま) 【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) 目次1 コントロール用のグラフ領域を作成する2 brushを宣言する3 選択領域用のre …

d3.jsのグラフにマウスオーバーでツールチップをつける

決め打ちで スタイルでフォントサイズを指定した ツールチップがはみ出す場合の条件と処理を追加

 

簡単にグラフが作成できるC3.jsをRailsでつかってみた

By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …

svgでビジュアライゼーションことはじめ~d3.js

  d3js.org/ nvd3.com/ 参照 www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_20.htm   環境 ubuntu serv …

no image

d3.jsで力指向グラフを使って遊ぶ2

力指向グラフ(force layout)でノードの追加・削除をやってみた     緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除 Backbone.js …