mxgraph
I.おなじみのHelloWorldから始めましょう
mxGraph、mxCell、mxEdge を理解する必要があります。
- mxGraphはmxgraphプロジェクトの初期化で、new mxGraph(container id)を使用してmxgraphオブジェクトを作成します。これは次のように理解できます。
let div = document.getElementById('app') - mxCellはノード・クラスを参照し、mxgraphのノードはmxCellクラスに含まれるすべての情報を、後の要件は、mxCellに基づいて変更されます。
- mxEdge は mxCell と似ています。mxEdge はノード間の線を表し、そのプロパティは基本的に mxCell と同じです。
- mxGraphはmxgraphプロジェクトの初期化で、new mxGraph(container id)を使用してmxgraphオブジェクトを作成します。これは次のように理解できます。
mxGraph、mxCell、mxEdgeクラスを理解していれば、helloWorldのコードを実装することができます。
<html> <head> /*この作品は、mxGraphをインポートすることである、このオンラインチュートリアルでは、自分自身を見つけることができる*/ <script type="text/javascript"> mxBasePath = '../src'; </script> <script type="text/javascript" src="../src/js/mxClient.js"></script> <script type="text/javascript"> function main(container) { // ブラウザがmxgrpah if (!mxClient.isBrowserSupported()) { mxUtils.error('Browser is not supported!', 200, false); } else { // ここでは、mxGraphクラスを使ってmxgraphオブジェクトをインスタンス化する。 var graph = new mxGraph(container); // 現在のmxgraphオブジェクトのルート・ノードを取得する。 var parent = graph.getDefaultParent(); // これはデータモデルを更新するメソッドで、ここで削除しても構わない。 graph.getModel().beginUpdate(); try { // insertVertexinsertEdgeパラメータの意味は、apiのドキュメントにある。 var v1 = graph.insertVertex(parent, null, 'Hello,', , 30); // ここではv1 v2がmxCellで、2つのノード情報がここにある。 var v2 = graph.insertVertex(parent, null, 'World!', , 80, 30); // ここではe1がmxEdgeで、中間の2つのノードがこのような情報になっている。 var e1 = graph.insertEdge(parent, null, '', v1, v2); } finally { graph.getModel().endUpdate(); } } }; </script> </head> <body onload="main(document.getElementById('graphContainer'))"> <div id="graphContainer" style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;"> </div> </body> </html>
