GoJS-概要

gojsはhtml 5ブラウザに基づいてインタラクティブなグラフィックグラフを描くJavaScriptフレームワークを容易に実現できる.gojsはオブジェクト向けのプログラミングモードを採用している.図形描画テンプレートをグラフィックオブジェクトで表します.通常のjsオブジェクトでデータをデータモデルとして格納し、グラフィックオブジェクトに値を与える属性をデータバインドのモードとします.gojsは、私たちのインタラクティブな動作を表す多くのツールクラスを提供しています.グラフィックオブジェクトの作成、データモデルの構築、プロパティの設定、データモデルのバインド、ツールクラスを使用して動作を追加することで、インタラクティブなパフォーマンスが豊富なさまざまなグラフを作成する必要があります.
簡単なgojsグラフ
次のコードはnodeテンプレートとデータモデルを定義し、簡単なグラフを構築します.

// For conciseness. See the "Building Parts" intro page for more
    var $ = go.GraphObject.make;

    // the node template describes how each Node should be constructed
    diagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape automatically fits around the TextBlock
        $(go.Shape, "RoundedRectangle",
          // bind Shape.fill to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          // bind TextBlock.text to Node.data.key
          new go.Binding("text", "key"))
      );

    // the Model holds only the essential information describing the diagram
    diagram.model = new go.GraphLinksModel(
    [ // a JavaScript Array of JavaScript objects, one per node
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [ // a JavaScript Array of JavaScript objects, one per link
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);

    diagram.initialContentAlignment = go.Spot.Center;
    // enable Ctrl-Z to undo and Ctrl-Y to redo
    diagram.undoManager.isEnabled = true;

結果:
上には画像が表示されていますが、実際にはこのグラフでマウスの中ボタンでスクロールしたり、選択したり、削除したり、やり直したり、取り消したりすることができます.
gojsの基本概念
上記の例では,まずgojsの産出物を感覚的に認識し,gojsの基本概念を述べる.
gojsが描いたグラフ(Diagram)には、点と線(NodeとLink)の2つの最も基本的な要素があり、グループ(Group)を自由に組み合わせることができます.すべての要素はレイヤー上にあり、レイアウトすることができます.
各Diagramは、ノードの情報とリンクの所属関係をデータモデル(Model)によって埋め込み、決定する.ノードとリンクのテンプレートとデータモデルを作成するだけで、他のことはgojsに任せます.モデルを通りますNodeDataArrayメソッドとGraphLinksModel.linkDataArrayメソッドは、モデルを自動的にロードし、要素を構築します.
各ノードとリンクは、テキスト、形状、色などの情報、およびインタラクティブな動作をテンプレートで記述します.各テンプレートは、TextBlock、Shape、Pictureなどの要素をこのパネルに追加したり、マウスが離れたインタラクティブな動作をパネルに追加したりすることができます.このパネルはテンプレートです.
各ノードの位置はDiagramを使用することができる.俺達は...Layoutは初期化設定を行い、インタラクティブな動作に基づいてドラッグ&ドロップすることもできます.
gojsのツールクラスでは、Diagramにマウス、キーボードイベントを追加できます.一般的にDiagramでは、ドラッグ、ワイヤなど、いくつかのインタラクティブな動作がデフォルトで設定されています.ツールクラスを管理するには、ToolManagerオブジェクトを使用します.また、いくつかのインタラクションを停止したり、いくつかのインタラクションを開いたりするなど、インタラクション動作を管理することもできます.
各Diagramには、ポイントDeleteキー削除要素、Ctrl+Cコピー、Ctrl+V貼り付け、Ctrl+Z取り消しなどのキーボードコマンドを追加するCommandHandlerオブジェクトも含まれています.しかしCommandHandlerもToolManagerによって管理されている.
Diagramでは、マウスの中ボタンでビューをスクロールしたり、拡大縮小したりすることもできます.
gojsはまた、大規模なグラフの概要を理解するためのグラフのプレビュービュー(Overview)を提供し、作成したコンポーネントを管理するコンポーネント管理パネル(Palette)を提供し、Diagramにコンポーネントをドラッグ&ドロップすることをサポートします.
Diagramでは、NodeまたはLinkを選択すると、Nodeの周りにチェックボックスが追加されたり、Linkが変色したりするなど、少し変化していることがわかります.これらはすべてAdornmentオブジェクトによって制御されており、プロンプトボックスや右クリックメニューなどを追加することもできます.
Diagramのデフォルトのインタラクティブな動作

NodeまたはLinkを選択すると、青色のチェックボックスが表示され、Linkも青色になります.

Ctrl+マウスの左ボタンで複数の要素を選択します.

パネルでマウスの左ボタンをクリックしてマウスを移動すると、すべての要素を移動できます.

Ctrl+Aを使用してすべての要素を選択します.

要素を選択し、マウスで要素をドラッグします.

Ctrl+C/Ctrl+Vを使用して貼り付け要素をコピーできます.

要素を削除するには、Deleteキーを使用します.

複数の要素を選択し、Ctrl+Gを使用して選択した要素をグループ化します.

Ctrl+Shift+Gを使用してグループを分割できます.

要素がDiagramを超えると、スクロールバーが自動的に表示されます.

Nodeエッジをマウスでドラッグすると、他のNodeと接続できます.

Linkを選択すると、ターゲットノードを再選択できます.すなわち、再接続できます.

Diagramの作成
各DiagramはHTMLのDIV要素に依存する必要があります.gojsがこのDIVを引き継いだが、DIV自体の属性はCSSで設定することができます.例えば、位置、高さ、幅などです.gojsは実際にDIVにCanvas要素を作成し、CanvasのアスペクトはDIVのアスペクトに自動的に適合します.

<!-- The DIV for a Diagram needs an explicit size or else we won't see anything.     In this case we also add a border to help see the edges. -->
    <div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>

もちろん、Diagramの作成を開始する前に、まずgojsのファイルをインポートします.gojsのファイルはDevelop(gojs-debug.js)とProduct(gojs.js)の2種類に分けられ、前者は開発者が使用するためのもので、デバッグ用のコードがいくつか含まれているため、後者は正式に公開され、速度が速い.gojsはJavaScriptフレームワークに依存しないため、競合することなくJavaScriptフレームワークと一緒に使用できます.

<!-- Include the GoJS library. -->
    <script src="gojs.js"></script>

以下、gojsを用いて上記のDIVをDiagramとして構築することができるが、ここで注意しなければならないのは、gojsのapiを用いる場合、プレフィックスgo.を用いることである.

<!-- Create the Diagram in the DIV element using JavaScript. -->
    <!-- The "go" object is the "namespace" that holds all of the GoJS types. -->
    <script>
    var diagram = new go.Diagram("myDiagramDiv");
    diagram.model = new go.GraphLinksModel(
        [{ key: "Hello" },   // two node data, in an Array
        { key: "World!" }],
        [{ from: "Hello", to: "World!"}]  // one link, in an Array
    );
    </script>

これで簡単なDiagramを構築しました.