AntV G6 基础元素详解（React版）
一、初识 AntV G6
AntV G6 是蚂蚁集团推出的专业级图可视化引擎，适合构建关系图谱、拓扑图、流程图等场景。相比其他图形库，G6 提供完整的布局算法 和交互体系 ，开发者在 10 分钟内即可搭建可交互的图应用。
技术特点速览：
- 支持 Canvas / SVG 双渲染模式
- 内置 10+ 图布局算法
- 提供丰富的节点/边类型
- 完善的文档和 React 示例
二、节点（Nodes）完全指南
2.1 节点的核心属性
interface Node {id: string; // 必须！节点的唯一标识（类似身份证号）x?: number; // 可选，X坐标（不设置则自动布局）y?: number; // 可选，Y坐标label?: string; // 显示的文字标签type?: string; // 节点类型（默认圆形，可自定义）style?: { // 样式配置fill?: string; // 填充颜色stroke?: string; // 边框颜色lineWidth?: number;// 边框粗细};// 其他自定义属性...
}
█ 关键规则：
id是必须且唯一 的，就像每个人的身份证号- 如果多个节点使用相同
id，会导致渲染异常 - 未设置
x/y时，G6会自动计算布局位置
2.2 基础节点示例
// 正确的节点配置
const nodes = [{ id: 'A', label: '服务器' }, { id: 'B', x: 100, y: 200, type: 'rect' }
];// 错误的配置 ❌
const badNodes = [{ label: '节点1' }, // 缺少id{ id: 'A' }, // 重复id{ id: 'A' }
];
█ 在React中的使用示例：
function NodeDemo() {const data = {nodes: [{ id: 'home', label: '家庭电脑', type: 'circle' },{ id: 'cloud', label: '阿里云', type: 'rect' }],edges: [] // 暂时没有连接};return <G6Graph data={data} />;
}
三、边（Edges）完全指南
3.1 边的核心属性
interface Edge {source: string; // 必须！起点节点idtarget: string; // 必须！终点节点idlabel?: string; // 边的文字说明type?: string; // 边类型（直线/曲线等）style?: { // 样式配置stroke?: string; // 线条颜色lineWidth?: number;// 线条粗细lineDash?: number[];// 虚线样式};
}
█ 关键规则：
source和target必须指向已存在的节点id- 如果引用了不存在的节点id，边将不会显示
- 边的方向由
source→target决定
3.2 基础边示例
// 正确的边配置
const edges = [{ source: 'A', target: 'B' },{ source: 'B', target: 'C', label: '100Mbps' }
];// 错误的配置 ❌
const badEdges = [{ source: 'A' }, // 缺少target{ source: 'X', target: 'Y' }, // X/Y节点不存在{ target: 'B' } // 缺少source
];
2.3 边的连接原理
节点A (id: 'server')↓[边：source指向'server'，target指向'client']↓节点B (id: 'client')
█ 在React中的使用示例：
function EdgeDemo() {const data = {nodes: [{ id: 'router', label: '路由器' },{ id: 'pc', label: '办公电脑' }],edges: [{ source: 'router', target: 'pc',label: '有线连接',style: {stroke: '#1890ff',lineDash: [5, 5] // 虚线效果}}]};return <G6Graph data={data} />;
}
四、完整可运行示例
4.1 家庭网络拓扑案例
import React from 'react';
import G6 from '@antv/g6';function HomeNetwork() {const containerRef = React.useRef(null);React.useEffect(() => {if (!containerRef.current) return;// 创建图实例const graph = new G6.Graph({container: containerRef.current,width: 800,height: 500,defaultNode: {size: 40,style: {fill: '#e6f7ff',stroke: '#1890ff'}},defaultEdge: {style: {stroke: '#91d5ff',lineWidth: 2}}});// 网络拓扑数据const data = {nodes: [{ id: 'modem', label: '光猫' },{ id: 'router', label: '主路由器' },{ id: 'pc1', label: '书房电脑' },{ id: 'pc2', label: '卧室电脑' }],edges: [{ source: 'modem', target: 'router' },{ source: 'router', target: 'pc1' },{ source: 'router', target: 'pc2' }]};graph.data(data);graph.render();return () => graph.destroy();}, []);return (<div><h3>家庭网络拓扑图</h3><div ref={containerRef} style={{ border: '1px solid #f0f0f0',borderRadius: '8px',margin: '20px 0'}} /></div>);
}
如图所示：
一、初识 AntV G6
AntV G6 是蚂蚁集团推出的专业级图可视化引擎，适合构建关系图谱、拓扑图、流程图等场景。相比其他图形库，G6 提供完整的布局算法 和交互体系 ，开发者在 10 分钟内即可搭建可交互的图应用。
技术特点速览：
- 支持 Canvas / SVG 双渲染模式
- 内置 10+ 图布局算法
- 提供丰富的节点/边类型
- 完善的文档和 React 示例
二、节点（Nodes）完全指南
2.1 节点的核心属性
interface Node {id: string; // 必须！节点的唯一标识（类似身份证号）x?: number; // 可选，X坐标（不设置则自动布局）y?: number; // 可选，Y坐标label?: string; // 显示的文字标签type?: string; // 节点类型（默认圆形，可自定义）style?: { // 样式配置fill?: string; // 填充颜色stroke?: string; // 边框颜色lineWidth?: number;// 边框粗细};// 其他自定义属性...
}
█ 关键规则：
id?是必须且唯一 的，就像每个人的身份证号- 如果多个节点使用相同
id，会导致渲染异常 - 未设置
x/y时，G6会自动计算布局位置
2.2 基础节点示例
// 正确的节点配置
const nodes = [{ id: 'A', label: '服务器' }, { id: 'B', x: 100, y: 200, type: 'rect' }
];// 错误的配置 ?
const badNodes = [{ label: '节点1' }, // 缺少id{ id: 'A' }, // 重复id{ id: 'A' }
];
█ 在React中的使用示例：
function NodeDemo() {const data = {nodes: [{ id: 'home', label: '家庭电脑', type: 'circle' },{ id: 'cloud', label: '阿里云', type: 'rect' }],edges: [] // 暂时没有连接};return <G6Graph data={data} />;
}
三、边（Edges）完全指南
3.1 边的核心属性
interface Edge {source: string; // 必须！起点节点idtarget: string; // 必须！终点节点idlabel?: string; // 边的文字说明type?: string; // 边类型（直线/曲线等）style?: { // 样式配置stroke?: string; // 线条颜色lineWidth?: number;// 线条粗细lineDash?: number[];// 虚线样式};
}
█ 关键规则：
source和target必须指向已存在的节点id- 如果引用了不存在的节点id，边将不会显示
- 边的方向由
source→target决定
3.2 基础边示例
// 正确的边配置
const edges = [{ source: 'A', target: 'B' },{ source: 'B', target: 'C', label: '100Mbps' }
];// 错误的配置 ?
const badEdges = [{ source: 'A' }, // 缺少target{ source: 'X', target: 'Y' }, // X/Y节点不存在{ target: 'B' } // 缺少source
];
2.3 边的连接原理
节点A (id: 'server')↓[边：source指向'server'，target指向'client']↓节点B (id: 'client')
█ 在React中的使用示例：
function EdgeDemo() {const data = {nodes: [{ id: 'router', label: '路由器' },{ id: 'pc', label: '办公电脑' }],edges: [{ source: 'router', target: 'pc',label: '有线连接',style: {stroke: '#1890ff',lineDash: [5, 5] // 虚线效果}}]};return <G6Graph data={data} />;
}
四、完整可运行示例
4.1 家庭网络拓扑案例
import React from 'react';
import G6 from '@antv/g6';function HomeNetwork() {const containerRef = React.useRef(null);React.useEffect(() => {if (!containerRef.current) return;// 创建图实例const graph = new G6.Graph({container: containerRef.current,width: 800,height: 500,defaultNode: {size: 40,style: {fill: '#e6f7ff',stroke: '#1890ff'}},defaultEdge: {style: {stroke: '#91d5ff',lineWidth: 2}}});// 网络拓扑数据const data = {nodes: [{ id: 'modem', label: '光猫' },{ id: 'router', label: '主路由器' },{ id: 'pc1', label: '书房电脑' },{ id: 'pc2', label: '卧室电脑' }],edges: [{ source: 'modem', target: 'router' },{ source: 'router', target: 'pc1' },{ source: 'router', target: 'pc2' }]};graph.data(data);graph.render();return () => graph.destroy();}, []);return (<div><h3>家庭网络拓扑图</h3><div ref={containerRef} style={{ border: '1px solid #f0f0f0',borderRadius: '8px',margin: '20px 0'}} /></div>);
}
如图所示：
4.2 代码解析
-
节点定义 ：
- 4个网络设备节点：光猫、主路由器、两台电脑
- 每个节点都有唯一
id和中文标签
-
边连接 ：
- 光猫 → 主路由器（WAN连接）
- 主路由器 → 各电脑（LAN连接）
-
样式配置 ：
- 默认节点：天蓝色填充，蓝色边框
- 默认边：浅蓝色实线
4.3 运行效果描述
- 将看到4个蓝色圆形节点，标签清晰可见
- 节点之间用浅蓝色线条连接
- 自动布局排列成树状结构
- 支持画布拖拽和缩放操作
五、常见问题排查
5.1 节点不显示？
? 检查项：
- 确认所有节点都有
id字段 - 检查
id是否重复 - 确认容器元素已正确挂载
5.2 边不显示？
? 检查项：
- 确认
source和target的值正确 - 检查引用的节点id确实存在
- 确认边数据在
edges数组中
5.3 布局混乱？
? 解决方案：
- 显式设置节点坐标：
nodes: [{ id: 'A', x: 100, y: 100 },{ id: 'B', x: 300, y: 200 }
]
- 使用布局算法：
const graph = new G6.Graph({// ...其他配置layout: {type: 'force', // 力导向布局preventOverlap: true}
});
六、最佳实践建议
-
ID命名规范 ：
// 好的示例 { id: 'core_switch_01' }// 不好的示例 ? { id: '节点1' } // 避免中文 { id: ' ' } // 不要用空格 -
动态更新数据 ：
// 在React组件中 const [graphData, setGraphData] = useState(initialData);// 添加新节点 const addNode = () => {setGraphData(prev => ({nodes: [...prev.nodes, { id: 'newNode' }],edges: prev.edges})); }; -
数据校验工具 ：
// 验证数据格式 const isValidData = (data) => {const nodeIds = new Set();for (const node of data.nodes) {if (!node.id || nodeIds.has(node.id)) return false;nodeIds.add(node.id);}// 检查边...return true; };
本教程所有示例均通过以下环境验证：
- React 18.2.0
- @antv/g6 4.8.6
- Node.js 16.x
4.2 代码解析
-
节点定义 ：
- 4个网络设备节点：光猫、主路由器、两台电脑
- 每个节点都有唯一
id和中文标签
-
边连接 ：
- 光猫 → 主路由器（WAN连接）
- 主路由器 → 各电脑（LAN连接）
-
样式配置 ：
- 默认节点：天蓝色填充，蓝色边框
- 默认边：浅蓝色实线
4.3 运行效果描述
- 将看到4个蓝色圆形节点，标签清晰可见
- 节点之间用浅蓝色线条连接
- 自动布局排列成树状结构
- 支持画布拖拽和缩放操作
五、常见问题排查
5.1 节点不显示？
✅ 检查项：
- 确认所有节点都有
id字段 - 检查
id是否重复 - 确认容器元素已正确挂载
5.2 边不显示？
✅ 检查项：
- 确认
source和target的值正确 - 检查引用的节点id确实存在
- 确认边数据在
edges数组中
5.3 布局混乱？
✅ 解决方案：
- 显式设置节点坐标：
nodes: [{ id: 'A', x: 100, y: 100 },{ id: 'B', x: 300, y: 200 }
]
- 使用布局算法：
const graph = new G6.Graph({// ...其他配置layout: {type: 'force', // 力导向布局preventOverlap: true}
});
六、最佳实践建议
-
ID命名规范 ：
// 好的示例 { id: 'core_switch_01' }// 不好的示例 ❌ { id: '节点1' } // 避免中文 { id: ' ' } // 不要用空格 -
动态更新数据 ：
// 在React组件中 const [graphData, setGraphData] = useState(initialData);// 添加新节点 const addNode = () => {setGraphData(prev => ({nodes: [...prev.nodes, { id: 'newNode' }],edges: prev.edges})); }; -
数据校验工具 ：
// 验证数据格式 const isValidData = (data) => {const nodeIds = new Set();for (const node of data.nodes) {if (!node.id || nodeIds.has(node.id)) return false;nodeIds.add(node.id);}// 检查边...return true; };
本教程所有示例均通过以下环境验证：
- React 18.2.0
- @antv/g6 4.8.6
- Node.js 16.x