antv-g6-graph

G6 v5 图可视化

概述

G6 v5 是 AntV 的图可视化引擎，适用于网络图、树图和关系可视化。它采用声明式配置风格，通过一次构造函数调用 new Graph({...}) 定义所有节点、边、布局、交互行为和插件。

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		每条结果的最大 token 数（默认值：无限制）

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', ... });

必须：在一次构造函数调用中配置所有内容，并执行 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' } }

必须：力导向布局中的 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
Combo / 分组节点	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 图可视化引擎