序章
G6 の公式紹介の最初の文を引用すると、G6 はグラフ視覚化エンジンです。グラフ描画、レイアウト、分析、相互作用、アニメーションなど、グラフ視覚化の基本機能を提供します。関係を透明かつシンプルにするように設計されています。ユーザーがリレーショナル データを洞察できるようにします。
バックグラウンド
一般的な開発プロセスでは、ほとんどの人が echarts や highcharts などのチャート プラグインを使用して、「美しい」データ表示を開発します。それから、少し前に、データをトポロジカル グラフで美しく表示するという要求タスクにも遭遇しました.実際、echarts のグラフ関係図は、要求が要求する基本的な効果を実現できます。
というわけで、最初のトポロジーマップを開発するときは、時間的な制約があったため（開発時間はよくわかっています）、急いで Echarts を使用して実現しました。レンダリングは次のとおりです。
echartsで作ったトポロジーマップ（関係図）はズームイン・アウトができ、アイコンもSVGに対応し、詳細はスライドで表示可能（ここでは詳細は非同期に要求されるのではなく、元々ノードから提供されている。非同期でリクエストしたい場合は、ビュー データ全体を更新するには、ビューをリロードする必要があります)。アイコンにはスライド ズーム効果もあり、マップ全体でドラッグ アンド ドロップもサポートできます。
トポロジ マップ全体を開発した後、開発者として、実際にはすべて問題ないと思います。しかし欠点は、位置を移動する効果を実現するために、単一のアイコンをドラッグ アンド ドロップできるようにしたいという要求です.echarts のすべての構成を読み、もう一度確認したところ、これを提供する機能が本当にないことがわかりました.効果。結局、echartsのトポロジーマップの各アイコンの位置は初期化の時点で決まるのですが、ノードデータにxとyのデータを1つ1つ与えて、つまり位置を自分で計算している(みたいな感じです)大学でプログラミングを学び始め、C++ を使って猫を描いていた頃に戻りました)。
echartsはトポロジーダイアグラム（関係図）を展開しており、まとめとしては、構成はシンプルだが位置計算が面倒、機能が少なすぎる。(echarts は関係図用のチャート プラグインではなく、要件もそれほど高くありません)
したがって、後で新しいモジュールでトポロジ マップを開発するときに、新しい愛を見つけることしかできません。
インターネットでフロントエンドのトポロジー図のプラグインをたくさん探しましたが、ほとんどが私を満足させるのが難しく、主な不満点は次の 3 点です。
1. プラグインが古すぎてスタイルが良くない インポート方法はスクリプトタグのインポートのみをサポートしており、古すぎて更新されていません。
たとえばjtopo :
このレンダリング画像を見ると、小学校のコンピューター室で xp 系のコンピューターを見ていた時代に戻ったような気がします。. .
最新バージョンは 0.4.8 で、時刻は明記されていませんが、0.4.4 から 4 バージョン離れた 2014 年です。現在は 2021 年末で、ほぼ 7 年後ですが、アップデート イテレーションのマイナー バージョンは 4 つしかありません。. . （作者が諦めたのか…。実は今でもネット上でこのプラグインを推している方がたくさんいます。構成はシンプルで機能も豊富です。確かに一部の古いプロジェクトには適しています）
2. 構成ドキュメントが少ないか、すべて英語で書かれている. 私の英語レベルはそれほど高くありませんが、 visjs プラグイン
などのドキュメント (広東語、プレッシャーなし) を読むのは簡単です。しかし、私は中国人です (実際、ドキュメントは少しまばらで十分に詳細ではありません。さらに詳細なドキュメントが壁を越えなければならないかどうかもわかりません。また、英語を読むのは中国語を直接読むほど速くないので、私は読んでいません。英語のドキュメントをゆっくり勉強する時間があまりない)、国産プラグインに対応したい！（中国のバックボーン）
3. 個人的に開発されたプラグインは、専門チームによって保守されていません。
これはより致命的であり、機能が多いかどうかは言うまでもなく、反復的なメンテナンスが行われていないだけで十分であり、多くのバグが存在する可能性があります。会社の！
上記の 3 点に基づいて、ほとんどのトポロジ マップ プラグインを選別し、最終的に G6 を見つけました。特定の中国の文書を含む国内開発(インターネット上の多くの人々は、G6 文書は十分に詳細ではないと言いました。実際には十分に詳細ではありませんが、少し「面倒」です。少し乱雑で、飛び回って確認してください。異なる G6 バージョンで使用されている構成は同じではなく、ドキュメントは時間内に更新されていません。そのため、Baidu またはサンプルで表示されているものは、使用しても機能しない場合がありますが、それでも使用できます。注意深く見て、自分の開発経験を組み合わせると理解できます)、Ant Financial の専門チームは、豊富な機能と美しいスタイルを備えたプラグインを開発および保守します。
基本的な考え方
G6 チャートのサンプル ディレクトリから、実際には 2 種類の G6 チャートが存在することがわかります。1 つは一般的なチャートで、もう 1 つはツリー チャートです。トポロジ マップを開発するときは、これらの両方を使用しました。データの観点から見ると、最大の違いは、一般的なグラフには 2 つのデータ ノードとエッジの関係が必要であるのに対し、ツリー グラフは単なるツリー構造のデータ オブジェクトであり、関係がより単純になることです。
資料の見方
初めて G6 を開発に使用する場合は、まずG6 チュートリアルのコア コンセプトを読むことをお勧めします. その中にマップがあります. このマップを見て、G6 の構成と機能を理解するのに数分かかります. .
先ほども言いましたが、G6のドキュメントは初めて読むとごちゃごちゃした感じがしますし、所々説明が詳しくなく、一方が言及され他方が語られるという状況が常にありますが、だから初めて読んだときは、ちょっと違和感がある。しかし、上で述べた基本的な概念を理解してから、G6 を一般的なグラフとツリー グラフ
の違いに大別してから、ドキュメントの API ドキュメントをこのように見てみると、はるかに明確になります。図を見るときは、樹形図の構成を見てみましょう。API ドキュメント リンク
どのような種類のグラフを作成するかを決定するときは、対応するグラフの構成と一般的な構成のみを確認することができ、他には何も見ないでください.2 つのグラフの構成は依然として非常に異なっており、それらは混乱しやすい。
使い方
ここでナンセンスな話をする必要はありません。詳細についてはドキュメントを参照してください。以下では、プロセスについて簡単に説明します。
1、まずは取り付けです。
npm install --save @antv/g6
2.次に参照があります
import G6 from '@antv/g6';
3.ページにチャートコンテナとしての要素があることを確認してください
<div id="mountNode"></div>
4. Graph を初期化し、グラフ インスタンスを生成します。
一般的なグラフ (グラフ):
const graph = new G6.Graph({
container: 'mountNode', // 容器
width: 500,
height: 500,
modes: {
default: ['drag-canvas'], // 这有好几个配置，支持拖拽画布、节点，还有放大缩小画图都可以在这设置
},
layout: {
type: 'radial', // 布局类型，echarts需要你设置xy定位，而这个类型可以帮你实现各种布局类型
unitRadius: 50,
center: [500, 300],
},
});
TreeGraph (ツリーグラフ):
const treeGraph = new G6.TreeGraph({
container: 'mountNode',
width: 800,
height: 600,
modes: {
default: [
{
type: 'collapse-expand',
onChange(item, collapsed) {
const icon = item.get('group').findByClassName('collapse-icon');
if (collapsed) {
icon.attr('symbol', EXPAND_ICON);
} else {
icon.attr('symbol', COLLAPSE_ICON);
}
},
},
'drag-canvas',
'zoom-canvas',
],
},
layout: {
type: 'dendrogram',
direction: 'LR', // H / V / LR / RL / TB / BT
nodeSep: 50,
rankSep: 100,
radial: true,
},
});
実際、上記の 4 つの手順は完了しています。必要に応じていくつかのことをカスタマイズする必要があるだけなので、API ドキュメントの下の図にある一般的な構成を確認する必要があります。（機能が非常に強力であるとしか言えません。ドキュメントをどれだけ注意深く読むかによって異なります）
写真の構成ドキュメントを見て、雑多なことを書きすぎるよりはマシです。
要約する
G6 を使用してトポロジ マップを作成することは、echarts よりもはるかに優れています. 少なくとも機能ははるかに豊富であり、基本的にニーズを満たしています. ただし、開発プロセス中にいくつかの問題が発生します. たとえば、ノードが多すぎると、内部の計算と配置により多くのパフォーマンスが消費されます. 性能の低いコンピューター (一部の会社のコンピューター) は、ロードに数分かかる場合があります. 、そしてページのレンダリングにも影響します（GPUをオンにした後、ページの読み込みを具体的に制御する値があり、表示には true 、非表示には false 、その値を出力してfalseであることを確認しましたが、ページにはまだ読み込み効果がありましたが、G6 が配置を完了した後に削除されました。明らかに、この GPU アクセラレーションがページの更新に影響を与えました)。
案の定、ページにクールな効果を加えたい場合でも、コンピューターのパフォーマンスについていく必要があります。そうしないと、他の人にとっては難しすぎます。
最後に、私が作成した最終的なレンダリングを見てください。
今回の私の開発には、次の機能が含まれています。
-
ノードはドラッグ アンド ドロップをサポートします
-
空白のキャンバスはドラッグ アンド ドロップをサポート
-
ノードごとに異なるアイコンと状態を持つことができます (ここではカスタム ノードが使用されます)。
-
折りたたむと展開すると右下のアイコンが変わり、折りたたむと数字が表示され、展開するとマイナス記号が表示されます（これもカスタムノードを使用しており、アイコンはメイン アイコンに相対的に配置されます)
-
折りたたみと展開により、現在のノードの子ノードが非表示になり、表示されます (ノードのクリック イベントとグラフ インスタンスの下の showItem および hideItem を組み合わせて、ノードの表示と非表示を制御します)。
-
検索関連データが強調表示されます. 実はこれもカスタムノードで設定されています. データ内の検索関連データの属性を更新するだけです.
-
全画面表示が可能. ここでは, グラフ インスタンスの下の changeSize メソッドが使用されます. 全画面ボタンをクリックすると、ビューの幅と高さが再度更新され、二次読み込みはありません.
-
ノードにスワイプして詳細を表示します。
カスタム ノードのように、ノード エントリ イベントを利用し、バックエンド データを非同期的に要求し、G6 ツールチップ プラグインと連携して、 refreshItem を使用して、データ要求が戻ってきた後にその構成を更新します。 -
虫眼鏡効果。G6 プラグインも魚眼拡大鏡の効果を提供しますが、それを使用した後はまあまあで、指定された範囲のノードを拡大できるという期待よりもはるかに悪いです。
前述のように、ツリー図も作成しました. 結局、ツリー図のデータはシンプルです. 自分でエッジを設定する必要がなく、ニーズにも合っています. ノードには親ノードまたは子ノードが1つしかありません.あまり複雑ではないノード 関係 (ノードと多対多の関係がある場合、ツリー ダイアグラムは使用できません)。データ構造に関しては、私が開発したビジネス ニーズに非常に適しています。しかし、最終的な結果は非常に悪いです。データの最後のレイヤーが多くなり、数十になるため、ツリー マップに選択したツリー タイプまたはレイアウトに関係なく、ノードが多すぎるという問題を解決できません。
もちろん、放射状のものも使ってみましたが（下の写真のように）、多すぎると外側に密な円を形成します（同じ次元ですが、水平から垂直に変わりました） 、そして需要はそれを好きではありません。
したがって、最終的には、一般的なグラフしか使用できません。幸いなことに、最終結果は依然として非常に良好です。