インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント

1. gojsの紹介

gojs は、インタラクティブなビジュアル ダイアグラムを作成するための js ライブラリです。カスタマイズ可能なテンプレートとレイアウトを使用して複雑なノード、リンク、グループを作成し、フローチャート、マインド マップ、組織図、ガント チャートなどの単純なものから複雑なものまでさまざまなダイアグラムを作成します。また、ドラッグ アンド ドロップ、コピー アンド ペースト、インプレース テキスト編集など、ユーザー操作のための高度な機能も多数提供します。

gojs は Northwoods Software の製品です。 Northwoods Software は 1995 年に設立され、インタラクティブ グラフィック コントロールとライブラリを専門としています。同社のビジョンは優れたグラフィカル ユーザー インターフェイスを提供することであり、現在ではさまざまなプラットフォームにわたるインタラクティブなダイアグラム コンポーネントとライブラリの世界クラスのサプライヤーに成長しました。

2. Gojsのアプリケーションシナリオ

gojs の高い構築可能性に基づいて、多くの種類の視覚化を描くことができます。

1. フローチャート
2. マインドマップ
3. ツリーマップ
4. ガントチャート
5. 棒グラフ
6. 円グラフ
7. 地図
8. ダッシュボード
9. その他のサンプル画像（数百）

3. gojs を選ぶ理由:

echarts、highcharts、antv series、d3、今日の主人公 gojs など、視覚化ライブラリは数多くあります。

図面のカスタマイズ度合いで並べ替え:

gojs、d3js > antv > echarts、highcharts

要件が単純で、カスタム チャート要素が必要ない場合は、デモ効果に最適なライブラリ (echarts または highcharts) を選択できます。

グラフ要素をある程度カスタマイズする必要がある場合は、antv g2/g6 デモがニーズを満たせるかどうかを確認できます。ほとんどのグラフ要素をカスタマイズできます。

上記でニーズを満たせない場合は、高度にカスタマイズできます。d3js と gojs を検討するか、最初にデモを見て、どちらがニーズに近いかを確認してから採用してください。

概要: gojs は高度にカスタマイズ可能で、複雑なグラフ操作に非常に適しています。

4. Gojs 入門ガイド

• 例を見る: サンプル

目的は、gojs で何ができるかを大まかに理解し、どのケース効果がニーズに近いかを見つけて確認することです。ケース コードを参照してニーズを満たし、半分の労力で 2 倍の結果を達成できます。また、始めるための非常に優れた参考資料でもあります。 1 つまたは 2 つのケース コードを読んだ後、gojs 描画の基本的な理解も得られます。

• 重要な概念

ケースコードを読んだ後、gojs 描画の基本を理解しました。描く前に描画の概念と構造を理解しておくとより役立ちます。それは、書く前にアウトラインを知っておくようなもので、書くアイデアがより明確になり、効率的になります。

• 基本的なデモの描画を開始する

• 参考図書館
• ページにgojsチャートコンテナを作成し、コンテナの幅と高さを設定します。そうしないと、グラフィックスを描画できません。
• チャートインスタンスを作成する
• レイアウト、スタイル、インタラクション、プロパティ、イベントなどを定義します（オプション）
• データをバインドしてグラフをレンダリングする

 // ダイアグラム コンテナー <div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div>
    
    // 参照 <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    
    <スクリプト>
        // グラフインスタンスを作成する var $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");

        // データをバインドする diagram.model = new go.GraphLinksModel(
            [ // ノード { キー: "Alpha", 色: "lightblue" },
                { キー: "ベータ"、色: "オレンジ" },
                { キー: "ガンマ"、色: "ライトグリーン" },
                { キー: "デルタ"、色: "ピンク" }
            ]、
            [ // 接続 { from: "Alpha", to: "Beta" },
                { から: "アルファ"、から: "ガンマ" },
                { から: "ベータ"、 から: "ベータ" },
                { から: "ガンマ"、から: "デルタ" },
                { から: 「デルタ」、から: 「アルファ」 }
            ]
        );
    </スクリプト> 

レイアウト、スタイル、ノード、グループ、接続、イベントなどを制御する場合は、対応するテンプレートをカスタマイズできます。以下はノードを例にしています。

 // ノードテンプレートは各ノードの構築方法を記述します。diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape、"RoundedRectangle"、新しいgo.Binding("fill"、"color"))、
        $(go.TextBlock、新しいgo.Binding("テキスト", "キー"))
    ); 

詳細: ガイド、API

5. ヒント（非常に実用的）

• 透かしを削除します。チャートが描画されると、デフォルトでは左上隅にライブラリ情報を含む透かしが表示されます。

ライブラリのソースコードで 7eba17a4ca3b1a8346 を検索し、その場所を見つけます。

 a.yr=bV[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](bV,Kk,4,4);

コードをコメント化または削除し、次のように変更します。

 a.yr=関数（）{trueを返します。};

• es6 import gojs: loadingGojsを参照してください

透かしを削除する必要があるため、ライブラリのソースコードをダウンロードする必要があり、現在、フロントエンド プロジェクトは基本的に es6 モジュール構成ファイルに基づいています。

したがって、必要なファイルにインポートできるように、go-module.js をダウンロードする必要があります。

 './go-module.js' から go として * をインポートします。

さらに、go-module.js はパッケージ化されているため、このファイルをパッケージ化から除外するようにパッケージを構成して、パッケージ化時間を短縮できます。 webpack を例にとると、変更は次のようになります。

 {
    テスト: /\.js$/,
    ローダー: 'babel-loader',
    インクルード: [resolve('src'), resolve('test')],
    + exclude: [resolve('src/assets/lib/')] //パッケージ化されたライブラリはこのディレクトリに配置されます}

• 青い枠線を削除します。グラフをクリックすると、グラフに青い枠線が表示されます。 CSS が助けになります:

 .diagram キャンバス {
    境界線: なし;
    アウトライン: なし;
}

diagram はダイアグラム コンテナーのクラス名です。

6. 演習: ノードのグループ化関係の視覚的なインタラクティブグラフの実装

1. 要件: グループ階層とノード間の関係を正しく表示できること。そしてインタラクションを実装します:
   • ノード情報を取得するには、単一のノードまたは複数のノードを選択します。
   • グループを選択し、グループ内のノードを選択して、グループ内のノード情報を取得します。
   • ノードを選択すると、現在のノードがルートノードとみなされ、ルートノードに接続されているすべてのノードを選択でき、ノード情報を取得できます。
2. バックエンドから取得されたインターフェースデータ:

インターフェースデータ

定数データ = {
  		「プロパティ」: [
  			{ "key": "t-2272", "parentKey": "j-1051", "name": "哈哈" },
  			{ "キー": "p-344", "親キー": "g--1586357764", "名前": "テスト" },
  			{ "key": "t-2271", "parentKey": "j-1051", "name": "クエリ" },
  			{ "key": "t-2275", "parentKey": "j-1052", "name": "ハッピー" },
  			{ "key": "j-1054", "parentKey": "p-344", "name": "嘻嘻" },
  			{ "key": "t-2274", "parentKey": "j-1052", "name": "クエリ" },
  			{ "キー": "j-1051", "親キー": "p-444", "名前": "こんにちは" },
  			{ "key": "j-1052", "parentKey": "p-444", "name": "編集" },
  			{ "key": "t-2281", "parentKey": "j-1054", "name": "嘻嘻" },
  			{ "キー": "p-444", "親キー": "g--1586357624", "名前": "テスト" },
  			{ "key": "g--1586357624", "name": "データグループ1" },
  			{ "key": "g--1586357764", "name": "データグループ2" },
  			{ "key": "t-2273", "parentKey": "j-1051", "name": "新規" }
  		]、
  		「依存関係」: [
  			{ "ソースキー": "t-2272", "ターゲットキー": "t-2274" },
  			{ "ソースキー": "t-2274", "ターゲットキー": "t-2275" },
  			{ "ソースキー": "t-2273", "ターゲットキー": "t-2272" },
  			{ "ソースキー": "t-2271", "ターゲットキー": "t-2272" },
  			{ "ソースキー": "t-2272", "ターゲットキー": "t-2281" }
  		]
  	}

1. gojsデモを参照: グループ化、ナビゲーション

やっと

次回は効果を実現するためのアイデアを共有します。ご興味があれば、データを使用し、この記事で共有されたデモと知識を参照して、自分で実装することができます。

私も初心者（gojs を使ったことがなかった）から始めましたが、ようやく効果が得られました。この記事に不足や誤りがあったり、良い提案があれば、ぜひ指摘してください。

どうもありがとうございます！ ！ ！

これで、インタラクティブな視覚化 js ライブラリ gojs の使用法とテクニックに関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。