D3.js

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

投稿日:

力指向グラフ(force layout)でノードの追加・削除をやってみた

 

 

緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除

  1. Backbone.jsを意識して、上位ではオブジェクトの場所だけを指定して、下位でイベントとオブジェクトの内容を決める形にしてみた
  2. なので、上位からは基本的にインスタンス.el.~で操作する.ただし、よく使うattrとかonとかはメソッドを書けばD3.jsと同じように扱えた.transitionとかはelから使っている.
  3. D3の仕様なのかわからないけど、コールバック関数はカッコを書かない。書くと認識しない.
  4. プロパティはどうしてもコールバック関数から認識できなかった.クラスの一番外側にローカル変数を定義することで共通化できた.危険かもしれない.たぶん_とかのbindとかを使うのだろう.これはまた勉強する. *ファットアローを使う
  5. Force Layoutでは、nodesという配列とnodeというDOMセレクションを両方操作しないといけない.しかも、相互に認識できなかった.
  6. Force Layoutにノードを追加するには配列にデータを追加して、その配列をselectAll().data().enter()で選んで追加分を増やす
  7. ノードの削除はもう少し複雑で、単純にselectAll().data().exit().remove()だけでは難しい.Force Layoutではindexというプロパティをもって記憶しているけど、これは単なる配列の順番なので、配列の途中から削除していくと後から順番が狂ってくる.そこで、nodesにidというプロパティを持たせて、data()の第2引数でidにひもづけることで削除するセレクションを指定することができる

 

力学モデル (グラフ描画アルゴリズム)

グラフの自動レイアウトに挑戦 #1 ばねモデル

 

Force Editor + Pan/Zoom

-D3.js
-

執筆者:

関連記事

no image

D3.jsのBarChartをCoffeeScriptでクラス化(仮)

    グラフを描くにはデータセットの数字だけじゃなくて、描画領域の大きさとか幅マージンの値とかいろんな設定が必要なわけで、ただ、データセットの数字とマージンの数字はにんげんにとっ …

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

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

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

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

d3.jsで棒グラフを作成する

  前提 SVGでビジュアライゼーションことはじめ~d3.js   目次1 データの数だけ棒を表示する2 scale3 テキストラベルをつける4 JSONで読む データの数だけ棒を …

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

参考 D3をはじめよう 参考 Force Layout 目次1 forceレイアウトのスケルトン2 zoom&pan forceレイアウトのスケルトン forceレイアウトではオブジェクトに力が作用し …