グラフ描画ライブラリ
Last modified by simdy on 2014/05/16, 14:37
グラフ描画ライブラリについて説明します。
※本ライブラリはベータ版です。API仕様などは予告なく変更される場合があります。
概要
グラフ描画ライブラリ（以下「グラフライブラリ」）は、ノードとエッジから構成される「グラフ」を描画するためのライブラリです。
以下のような特長があります。
- 高速動作
- 実際に画面に表示されるノードのみを描画
- ノード・エッジの表現の柔軟なカスタマイズ
- 任意のHTML要素・SVG要素を組み合わせてノードを表現できる
- インタラクティブ性
- ノードやエッジのクリックイベント、ノードの選択状態管理など
基本的な使い方
グラフライブラリの実体はh5.components.graph空間に存在します。
最も簡単にグラフを描画するには、以下の手順に従います。
- h5.components.graph.createSimpleGraphData()を呼び、GraphDataオブジェクトを作成
- h5.components.graph.createSimpleNodeRenderer()を呼び、SimpleNodeRendererオブジェクトを作成
- h5.components.graph.GraphControllerを、子要素を持たない空の<div>要素にバインド
- インスタンス化したGraphControllerに対して、setGraphData()とsetNodeRenderer()をそれぞれ呼ぶ
- GraphDataにノードやエッジを追加する（ノード情報として座標を与えると、その位置にノードが表示される）
以下に具体的なコード例を記載します。
var nodeSchema = {
id: {
id: true
},
label: null
};
var pageController = {
__name: 'sample.controller.PageController',
__ready: function() {
var graphData = h5.components.graph.createSimpleGraphData(nodeSchema);
var nodeRenderer = h5.components.graph.createSimpleNodeRenderer();
this._graphController.setGraphData(graphData);
this._graphController.setNodeRenderer(nodeRenderer);
var node1 = {
id: 1,
label: 'Node-1'
};
var node2 = {
id: 2,
label: 'Node-2'
};
var edge = {
id: 1, //このidはエッジのID
fromNodeId: 1,
toNodeId: 2
};
graphData.addNode([node1, node2]);
graphData.addEdge(edge);
},
_graphController: h5.components.graph.GraphController
};
id: {
id: true
},
label: null
};
var pageController = {
__name: 'sample.controller.PageController',
__ready: function() {
var graphData = h5.components.graph.createSimpleGraphData(nodeSchema);
var nodeRenderer = h5.components.graph.createSimpleNodeRenderer();
this._graphController.setGraphData(graphData);
this._graphController.setNodeRenderer(nodeRenderer);
var node1 = {
id: 1,
label: 'Node-1'
};
var node2 = {
id: 2,
label: 'Node-2'
};
var edge = {
id: 1, //このidはエッジのID
fromNodeId: 1,
toNodeId: 2
};
graphData.addNode([node1, node2]);
graphData.addEdge(edge);
},
_graphController: h5.components.graph.GraphController
};
アーキテクチャ
グラフライブラリの内部アーキテクチャは以下のようになっており、
hifiveのデータモデル機構を使用してノードおよびエッジデータの変更を検知しています。
createSimpleGraphData()を使用した例ではデータモデルは内部で自動的に作成していましたが、
独自に作成したデータモデルを使用することも可能です。
この場合、createSimpleGraphData()の代わりに、createGraphData()を指定します。
createGraphData()はGraphDataオブジェクトを返すので、addNodeModel(), addEdgeModel()メソッドを使用して
ノード、エッジに対応するデータモデルをセットします。
各モデルにデータアイテムをセットすると、自動的に画面にノードやエッジが表示されます。
詳しくはGraphDataのAPIドキュメント（後日掲載予定）を参照してください。
API仕様
⇒ APIDoc（後日追加予定）