WebHi
▲Top
App

twitter
ここをクリックしてロード
  

ばねグラフ 

どういうもの？

こんなかんじの動きをするやつです。コミュニティの表現とかでよく使われます。

 
 

機能

  • ばねグラフモデルの実装
  • ダブルクリックで子ノード生成とか(任意のイベントを設定できます)
  • ドラッグで移動、マウスホイールで拡大・縮小

注意点

  • IEではおそらく動作しません。（いつになったらIEはダブルクリックイベントに対応してくれるのでしょうか･･･）
  • ノード数が増えるにつれて動作が重くなります。
  • 時々、動きが収束せずに暴走することがあります。

ダウンロード

どうぞ。zip圧縮してあります。

導入方法

まず、グラフの表示枠を作ります。<div id="springGraph"></div>などを適当な場所に配置してください。中身は空にしておいてください。

次に、必要ファイルを読み込みます。次の3行を<head>内に挿入してください。ファイルパス(src="～"の部分)は必要に応じて変更してください。

<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript" src="graph.js" ></script>
<script type="text/javascript" src="graph.extend.js" ></script>

ちなみに、ドラッグとか拡大縮小の機能が不必要なら、graph.extend.jsは読み込む必要がありません。(ただ見せるだけのグラフになります)

これに続いて、グラフの表示スクリプトを記述します。上のサンプルだとこんな感じになります。

<script type="text/javascript">
//ダブルクリックしたときの、子の生成ロジックをここに記述。Ajaxなども使用可能
ExDNode.prototype.getNext=function(){
    var adNode=[
        this.parent.addExDNode(this.label+"の仲間1",new Point(300,300),"green"),
        this.parent.addExDNode(this.label+"の仲間2",new Point(500,300),"green")
    ];

    this.parent.addEdge(this,additionalNode[0]);
    this.parent.addEdge(this,additionalNode[1]);
    this.parent.addEdge(additionalNode[0],additionalNode[1],0.5);
};
Event.observe(window,"load",function window_onload(evt){
    var c=document.getElementById("sGraph");
    var g=new ExDGraph(c);

    var p=[
        new Point(130,140),
        new Point(180,260)
    ];
    //ノードの追加
    //引数は(ラベル、初期位置、(opt.)色)
    var node=[
        g.addExDNode("yi01",p[0]),
        g.addExDNode("imagination",p[1])
    ];

    //エッジの追加
    //引数は(ノード1、ノード2、(opt.)重み)
    var edge=[
        g.addEdge(node[0],node[1],0.05),
    ];

    //描画開始
    g.draw();
},false);
</script>

 

オブジェクトの詳細

ばねグラフには3段階のクラスがあります。

  1. Graph、Node、Edge…ばねグラフの基本機能を提供するクラス(graph.js内に記述)
  2. DGraph…移動と拡大縮小機能を追加したクラス(graph.extend.js内に記述)
  3. ExDGraph…ダブルクリックイベントで子ノードの生成とかができるように機能拡張したクラス(graph.extend.js内に記述)

よっぽどなことがない限り、ExDGraphが一番派手に見えるかと思いますが、状況によって使い分けてください。

Graphオブジェクトのメソッド

  • コンストラクタ(parent)
        parentをグラフを表示したいHTML要素(div推奨)としてオブジェクト生成
  • addNode(label,position,color)、addDNode(label,position,color)、addExDNode(label,position,color)
        labelをラベルとするノードをposition(必ずPoint型で指定)に配置する。colorはHTML色名で、省略可能。
        グラフオブジェクトの説明にもあったように、
      ばねグラフの基本動作 移動・拡大縮小 ダブルクリックで子ノード生成など
    Node ○ × ×
    DNode ○ ○ ×
    ExDNode ○ ○ ○

    といった感じになってます。ExDGraphでもaddNodeやaddDNodeは使えます。逆に、GraphではaddDNodeやaddExDNodeは未定義となり使えません。
  • addEdge(node1,node2,weight)
        node1とnode2(ともにノード型)を結ぶエッジを生成します。NodeとExDNodeをつなぐなども可能です。
        weightはノードどうしの連結力で、省略可能。0.01～10くらいが実用的な値かな・・・
  • draw()
        描画開始します
  • clear()
        全てのオブジェクトを消します