antv-g6-graph

G6 v5 グラフ可視化

概要

G6 v5 は、ネットワーク図、ツリーグラフ、関係性の可視化に対応する AntV のグラフ可視化エンジンです。new Graph({...}) の1回のコンストラクター呼び出しで、すべてのノード、エッジ、レイアウト、ビヘイビア、プラグインを定義する 宣言的な設定 スタイルを採用しています。

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],
    edges: [{ source: 'node-1', target: 'node-2' }],
  },
  layout: { type: 'force' },
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
});

await graph.render();

CDN の使用

<script src="https://unpkg.com/@antv/g6@5/dist/g6.min.js"></script>
<script>
  const graph = new G6.Graph({
    container: 'container',
    data: {
      nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],
      edges: [{ source: 'node-1', target: 'node-2' }],
    },
    layout: { type: 'force' },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  });
  graph.render();
</script>

コンテンツ取得サービス

データ可視化に AntV G6 を使用する際、G6 v5 の概念、使用方法、API、例などについて理解する必要がある場合は、提供されているコンテキスト取得サービスを利用できます。このスキルを使用すると、GET リクエストを使用して AntV の HTTP API サーバー経由でコンテンツを取得します。

• ホスト：https://sive.antv.antgroup.com
• エンドポイント：/api/v1/context/retrieve
• メソッド：GET
• パラメーター：query、library、topK、content、maxTokens

クエリでスキルを取得します（ハイブリッド検索＝FTS + ベクトル + RRF 融合）。制約に関するドキュメントも通常のスキルドキュメントとしてインデックス化されており、検索結果に自然に表示されます。

パラメーター	型	必須	説明
query	string	✅	検索キーワード。例：force layout node
library	string	✅	ライブラリ名：g2、g6、x6
topK	number		返す結果の数（デフォルト：5）
content	boolean		リファレンスドキュメントの Markdown 全文を返すかどうか（デフォルト：true）
maxTokens	number		結果ごとの最大トークン数（デフォルト：無制限）

curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=force+layout+node+style&library=g6"

重要なルール

必須：new Graph({...}) を使用してください — v4 の new G6.Graph() は使用しないでください

// ❌ WRONG — v4 constructor
new G6.Graph({ container: 'container', ... });

// ✅ CORRECT — v5 constructor
import { Graph } from '@antv/g6';
new Graph({ container: 'container', ... });

必須：すべての設定を1回のコンストラクター呼び出しにまとめ、await graph.render() を実行してください

// ❌ WRONG — v4 separate data method
graph.data(data);
graph.render();

// ✅ CORRECT — v5 declarative config + async render
const graph = new Graph({
  container: 'container',
  data: { nodes: [...], edges: [...] },
  layout: { type: 'force' },
  behaviors: ['drag-canvas', 'zoom-canvas'],
});
await graph.render();

必須：データ形式には id、source、target を使用してください

// ❌ WRONG — missing node id, missing edge endpoints
const data = { nodes: [{ label: 'A' }], edges: [{ from: 'A', to: 'B' }] };

// ✅ CORRECT — each node has unique id, each edge has source/target
const data = {
  nodes: [{ id: 'node-1', style: { labelText: 'A' } }],
  edges: [{ source: 'node-1', target: 'node-2' }],
};

必須：ラベルには style.labelText を使用してください — label や labelCfg は使用しないでください

// ❌ WRONG — v4 label config
node: { labelCfg: { text: 'Node 1' } }

// ✅ CORRECT — v5 style.labelText
node: { style: { labelText: 'Node 1' } }

必須：force レイアウトでは nodeStrength を 0 以上にしてください

// ❌ WRONG — negative nodeStrength causes unpredictable behavior
layout: { type: 'force', nodeStrength: -300 }

// ✅ CORRECT — non-negative value
layout: { type: 'force', nodeStrength: 300 }

必須：force レイアウトは preventOverlap / nodeSize に対応していません

// ❌ WRONG — v4 params silently ignored in v5
layout: { type: 'force', preventOverlap: true, nodeSize: 30 }

// ✅ CORRECT — use d3-force collide for overlap prevention
layout: { type: 'd3-force', collide: { radius: 30 } }

必須：Mode の概念はありません — ビヘイビアはフラットな配列です

// ❌ WRONG — v4 mode-based behavior config
modes: { default: ['drag-canvas', 'zoom-canvas'] }

// ✅ CORRECT — v5 flat behavior array
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element']

必須：container は必須です。デフォルトは 'container' です

// ❌ WRONG — no container specified
const graph = new Graph({ data });

// ✅ CORRECT
const graph = new Graph({ container: 'container', data, ... });

クイックリファレンス

ユーザーの目的	取得クエリ
グラフの初期化、コンテナー、レンダリング	GET /api/v1/context/retrieve?query=graph+init+render&library=g6
ネットワーク／フォースグラフ	GET /api/v1/context/retrieve?query=network+force+layout&library=g6
ツリー／マインドマップ／フィッシュボーン	GET /api/v1/context/retrieve?query=tree+mindmap+fishbone+layout&library=g6
Dagre／階層構造／フローチャート	GET /api/v1/context/retrieve?query=dagre+hierarchy+flow+chart&library=g6
円形／放射状／グリッドレイアウト	GET /api/v1/context/retrieve?query=circular+radial+grid+layout&library=g6
ノードのスタイル（rect、circle、diamond、html）	GET /api/v1/context/retrieve?query=node+style+rect+circle+diamond+html&library=g6
エッジの種類（line、cubic、polyline、loop）	GET /api/v1/context/retrieve?query=edge+line+cubic+polyline+loop&library=g6
コンボ／グループノード	GET /api/v1/context/retrieve?query=combo+group+node&library=g6
カスタムノード／エッジ	GET /api/v1/context/retrieve?query=custom+node+edge+element&library=g6
ビヘイビア（ドラッグ、ズーム、クリック選択、ホバー）	GET /api/v1/context/retrieve?query=behavior+drag+zoom+click-select+hover&library=g6
プラグイン（ミニマップ、ツールチップ、ツールバー、凡例）	GET /api/v1/context/retrieve?query=plugin+minimap+tooltip+toolbar+legend&library=g6
イベントシステム	GET /api/v1/context/retrieve?query=events+system+click+mouse&library=g6
状態／スタイルアニメーション	GET /api/v1/context/retrieve?query=state+animation+transform&library=g6
データ構造／変換	GET /api/v1/context/retrieve?query=data+structure+transforms&library=g6
テーマ／背景	GET /api/v1/context/retrieve?query=theme+background+style&library=g6
投げ縄選択／折りたたみ・展開	GET /api/v1/context/retrieve?query=lasso+collapse+expand+select&library=g6

依存関係

• @antv/g6 — G6 v5 グラフ可視化エンジン