《@antv/g6 从0到1》是一份系统性学习 AntV G6 图可视化引擎的入门指南。G6 是蚂蚁集团 AntV 团队推出的专业级图分析与图可视化引擎，适用于关系数据（如社交网络、知识图谱、流程图、拓扑图等）的可视化展示和交互分析。
下面是一个从零开始掌握 @antv/g6 的完整路径指南：
🚀 一、什么是 G6？
G6 是一个基于 Web 的 图可视化引擎，由 AntV 团队开发，支持：
- 节点（Node）、边（Edge）、组合（Combo）的绘制
- 多种内置布局（如力导引、环形、树状等）
- 强大的交互能力（拖拽、缩放、高亮、筛选等）
- 高度可扩展的自定义节点/边/行为
- 支持大规模图渲染（WebGL 渲染模式）
官网：g6.antv.antgroup.com
GitHub：github.com/antvis/G6
🧱 二、环境准备
1. 创建项目（以 React 为例）
npx create-react-app g6-demo
cd g6-demo
npm install @antv/g6
2. 引入 G6
import { Graph } from '@antv/g6';
📈 三、第一个 G6 图表（Hello World）
示例代码：绘制一个简单的关系图
import React, { useEffect } from 'react';
import { Graph } from '@antv/g6';
const MyGraph = () => {
useEffect(() => {
const data = {
nodes: [
{ id: 'node1', x: 100, y: 200 },
{ id: 'node2', x: 300, y: 200 },
],
edges: [
{ source: 'node1', target: 'node2' }
]
};
const graph = new Graph({
container: 'container', // 指定DOM容器ID
width: 800,
height: 600,
modes: {
default: ['drag-canvas', 'zoom-canvas'], // 允许拖拽画布、缩放
},
layout: {
type: 'radial', // 径向布局
}
});
graph.data(data); // 加载数据
graph.render(); // 渲染图表
return () => {
if (graph) {
graph.destroy();
}
};
}, []);
return <div id="container" style={{ border: '1px solid #ccc' }}></div>;
};
export default MyGraph;
🧩 四、核心概念解析
| 概念 | 说明 |
|---|---|
| Node（节点） | 表示图中的实体，如人、设备、页面等 |
| Edge（边） | 表示两个节点之间的关系 |
| Combo（组合） | 用于将多个节点分组，类似文件夹 |
| Graph（图实例） | 核心类，负责渲染和交互 |
| Layout（布局） | 控制节点排列方式，如 force、dagre、circular 等 |
| Mode（模式） | 定义用户交互行为集合，如拖拽、选择、创建边等 |
| Behavior（行为） | 可编程的交互逻辑，如点击高亮邻居 |
🎨 五、美化图表
1. 自定义节点样式
graph.node((node) => {
return {
type: 'circle', // 使用圆形节点
style: {
fill: '#5B8FF9',
stroke: '#3E5DDB',
lineWidth: 2,
},
};
});
2. 自定义边样式
graph.edge((edge) => {
return {
style: {
stroke: '#F6BD16',
endArrow: true,
},
};
});
🔁 六、使用布局自动排布
无需手动设置 x, y，让布局算法自动计算位置。
layout: {
type: 'force', // 力导向布局
preventOverlap: true,
linkDistance: 100,
nodeStrength: -300,
edgeStrength: 0.5,
},
常见布局类型：
force：力导向（适合无向图）dagre：层次布局（适合流程图、组织结构）circular：环形布局radial：径向布局grid：网格布局
🖱️ 七、添加交互行为
示例：点击节点高亮其邻居
graph.on('node:click', (evt) => {
const { item } = evt;
const model = item.getModel();
// 清除之前高亮
graph.getNodes().forEach((node) => {
graph.setItemState(node, 'highlight', false);
});
// 高亮当前节点及其邻居
const neighbors = graph.getNeighbors(item);
graph.setItemState(item, 'highlight', true);
neighbors.forEach((neighbor) => {
graph.setItemState(neighbor, 'highlight', true);
});
});
// 在 node 中根据状态设置样式
graph.node((node) => {
const isHighlight = node.highlight;
return {
style: {
fill: isHighlight ? '#FF6B6B' : '#5B8FF9',
stroke: isHighlight ? '#FF4757' : '#3E5DDB',
},
};
});
✅ 八、常用 Behavior 内置功能
在 modes 中配置：
modes: {
default: [
'drag-canvas', // 拖动画布
'zoom-canvas', // 缩放画布
'drag-node', // 拖动节点
'select-node', // 选择节点
'collapse-expand-combo' // 折叠组合
],
},
你也可以注册自定义 Behavior：
G6.registerBehavior('custom-behavior', {
getEvents() {
return {
'node:dblclick': 'onDblClick',
};
},
onDblClick(evt) {
console.log('双击了节点:', evt.item.getModel());
}
});
📦 九、高级功能概览
| 功能 | 说明 |
|---|---|
| 自定义节点/边 | 使用 registerNode / registerEdge 绘制复杂图形（如带图标、文本、图片） |
| Combo 分组 | 实现嵌套结构，支持折叠展开 |
| 大规模图优化 | 启用 webgl 渲染模式提升性能 |
| 导出图片 | graph.downloadImage() 导出 PNG/SVG |
| 数据更新 | 使用 graph.changeData(newData) 动态刷新 |
| 插件扩展 | 如 minimap（小地图）、grid（背景网格）、toolbar 等 |
📘 十、学习资源推荐
- 官方文档（中文）
👉 g6.antv.antgroup.com - 官方示例库（必看）
👉 g6.antv.antgroup.com/examples - GitHub 仓库 & Issues
👉 github.com/antvis/G6 - 社区交流
-
- 钉钉群：搜索 “AntV” 进入官方技术支持群
- GitHub Discussions 提问
🏁 十一、总结：从0到1路线图
| 阶段 | 目标 |
|---|---|
| 第1天 | 创建项目，跑通第一个 G6 示例 |
| 第2天 | 学会使用不同布局（force/dagre/circular） |
| 第3天 | 掌握基本交互（点击、高亮、拖拽） |
| 第4天 | 自定义节点/边样式 |
| 第5天 | 使用 Combo 分组 + 折叠功能 |
| 第6天 | 添加 minimap、grid 插件 |
| 第7天 | 实现一个真实场景案例（如知识图谱、流程图） |
💡 实战建议
- 数据格式统一为
{ nodes: [], edges: [], combos?: [] } - 使用 TypeScript 可获得更好的类型提示
- 对于大数据量（>1000 节点），启用
webgl渲染或开启incremental增量渲染 - 尽量使用
graph.changeData()而非重新实例化 Graph
如果你告诉我你想实现的具体图表类型（比如：流程图、组织架构图、社交网络图），我可以为你定制一份详细的代码模板和实现步骤！
是否需要我提供一个 React + TypeScript + G6 的完整模板项目结构？欢迎继续提问！
