ライブラリ自体、およびドキュメントとサンプル（すべて英語）は、 公式Webサイトからダウンロードできます。
そして順番に。
キャンバスとして、html5キャンバスが使用されます。つまり、それをサポートしていないブラウザーでは何も機能しません。
AJAXを使用して頂点とエッジに関するJSONデータを読み込む簡単なページを作成しましょう。 基礎として、キットに付属する例を使用してアップグレードします（データのロード、表示）。
すべての頂点とエッジをリストするデータファイルを作成します
data.json：
{
"nodes": [
{"name": "node_1"},
{"name": "node_2"},
{"name": "node_3"},
{"name": "node_4"},
{"name": "node_5"},
{"name": "node_6"},
{"name": "node_7"},
{"name": "node_8"},
{"name": "node_9"},
{"name": "node_10"}
],
"edges": [
{"src": "node_3", "dest": "node_2"},
{"src": "node_5", "dest": "node_3"},
{"src": "node_8", "dest": "node_7"},
{"src": "node_1", "dest": "node_4"},
{"src": "node_7", "dest": "node_5"},
{"src": "node_3", "dest": "node_9"},
{"src": "node_2", "dest": "node_4"},
{"src": "node_6", "dest": "node_5"},
{"src": "node_9", "dest": "node_1"},
{"src": "node_10", "dest": "node_2"},
{"src": "node_1", "dest": "node_10"}
]
}
メインファイルで、必要なライブラリを接続し、すべてのjsスクリプトを外部ファイルに転送します
<script src="js/jquery.min.js"></script> <script src="js/arbor.js"></script> <script src="main.js"></script>
ドキュメントの本文に、描画するキャンバスを作成します
<canvas id="viewport" width="800" height="600"></canvas>
さて、順番に、どのようにすべてが機能しますか。
完全にロードされると、アーバーの設定でオブジェクトが作成されます。これには、さまざまなイベントの発生時に実行される機能、各頂点と面をレンダリングする機能も含まれます（これは私がライブラリを気に入ったため、ほとんどすべてを構成できます）。
次に、このオブジェクトをアーバーコンストラクターに渡します。アーバーコンストラクターは、このカルーセルをすべて起動します。
データの読み込みは、ページが完全に読み込まれた直後にも実行されます。
一般に、言葉よりもコードのほうが多いので、詳細なコメントを付けて直接アクセスすると、より明確で理解しやすいと思います。
main.js：
(function($){ var Renderer = function(canvas) { var canvas = $(canvas).get(0); var ctx = canvas.getContext("2d"); var particleSystem; var that = { init:function(system){ // particleSystem = system; particleSystem.screenSize(canvas.width, canvas.height); particleSystem.screenPadding(80); that.initMouseHandling(); }, redraw:function(){ // ctx.fillStyle = "white"; // ctx.fillRect(0,0, canvas.width, canvas.height); // particleSystem.eachEdge( // function(edge, pt1, pt2){ // ctx.strokeStyle = "rgba(0,0,0, .333)"; // ctx.lineWidth = 1; // ctx.beginPath(); // ctx.moveTo(pt1.x, pt1.y); // ctx.lineTo(pt2.x, pt2.y); // ctx.stroke(); }); particleSystem.eachNode( // function(node, pt){ // var w = 10; // ctx.fillStyle = "orange"; // ctx.fillRect(pt.xw/2, pt.yw/2, w,w); // ctx.fillStyle = "black"; // ctx.font = 'italic 13px sans-serif'; // ctx.fillText (node.name, pt.x+8, pt.y+8); // }); }, initMouseHandling:function(){ // var dragged = null; // var handler = { clicked:function(e){ // var pos = $(canvas).offset(); // canvas _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); // canvas dragged = particleSystem.nearest(_mouseP); // if (dragged && dragged.node !== null){ dragged.node.fixed = true; // } $(canvas).bind('mousemove', handler.dragged); // $(window).bind('mouseup', handler.dropped); // return false; }, dragged:function(e){ // var pos = $(canvas).offset(); var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); if (dragged && dragged.node !== null){ var p = particleSystem.fromScreen(s); dragged.node.p = p; // } return false; }, dropped:function(e){ // if (dragged===null || dragged.node===undefined) return; // , if (dragged.node !== null) dragged.node.fixed = false; // - dragged = null; // $(canvas).unbind('mousemove', handler.dragged); // $(window).unbind('mouseup', handler.dropped); _mouseP = null; return false; } } // $(canvas).mousedown(handler.clicked); }, } return that; } $(document).ready(function(){ sys = arbor.ParticleSystem(1000); // sys.parameters({gravity:true}); // sys.renderer = Renderer("#viewport") // $.getJSON("data.json", // function(data){ $.each(data.nodes, function(i,node){ sys.addNode(node.name); // }); $.each(data.edges, function(i,edge){ sys.addEdge(sys.getNode(edge.src),sys.getNode(edge.dest)); // }); }); }) })(this.jQuery)
ライブラリ自体が好きだったのは、頂点や顔を自分で描くことができ、イベントのアクションを設定できるからです。
結果のソースコードはこちらからダウンロードできます