作業の進め方
AntV G6 Graph は、ネットワーク、ツリー、階層、マインドマップなど、ノードとエッジで構成される接続データの可視化に焦点を当てています。このスキルは G6 v5 を対象とし、データ、レイアウト、外観、ビヘイビア、プラグインを宣言的な設定で構成します。中心となる問いは、関係構造をどう表示し、どう探索させるかです。
このエントリは、v5 への具体的な移行上の注意点と、専門的なトピック向けのリモート参照取得サービスを組み合わせています。G6 は G2 の統計チャートや X6 の図エディタとは区別されています。ノードとエッジの図はエディタのキャンバスに似ていますが、既存のネットワークを表示することと、ユーザーがワークフローを作成して保存できるようにすることは別のタスクです。
期待される成果物
- 提供された関係データセット向けに設定された G6 グラフビュー JavaScript
- ノード、エッジ、グループに対するレイアウトと視覚表現の選定
- ズーム、ドラッグ、選択などの明示的な探索操作
依頼からレビューまで
- 01関係データを検証する
各ノードに一意の ID を付け、エッジの端点が意図したノードを指していることを確認します。ラベルや視覚属性は、関係そのものから切り離します。
- 02ビューを選ぶ
構造に合わせて、フォースレイアウト、ツリー、階層、放射状など適したレイアウトを選びます。設定の詳細がエントリファイルの範囲を超える場合は、関連する G6 の参照を取得します。
- 03G6 v5 を設定する
記憶にある v4 の設定を混ぜず、対象リリースで文書化されているデータ、スタイル、ビヘイビア、レンダリングの規約を使います。
- 04グラフを検査する
実際のブラウザ実行環境で、描画されたラベル、エッジの端点の関係、レイアウトの読みやすさ、意図したインタラクションを確認します。整ったサンプルだけでなく、密集した部分や孤立した部分も確認してください。