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;// 边框粗细
  };
  // 其他自定义属性...
}

█ 关键规则：

1. id 是必须且唯一 的，就像每个人的身份证号
2. 如果多个节点使用相同id，会导致渲染异常
3. 未设置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;      // 必须！起点节点id
  target: string;      // 必须！终点节点id
  label?: string;      // 边的文字说明
  type?: string;       // 边类型（直线/曲线等）
  style?: {            // 样式配置
    stroke?: string;   // 线条颜色
    lineWidth?: number;// 线条粗细
    lineDash?: number[];// 虚线样式
  };
}

█ 关键规则：

1. source和target必须指向已存在的节点id
2. 如果引用了不存在的节点id，边将不会显示
3. 边的方向由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>
  );
}

如图所示：

image.png

4.2 代码解析

1. 节点定义 ：

   • 4个网络设备节点：光猫、主路由器、两台电脑
   • 每个节点都有唯一id和中文标签

2. 边连接 ：

   • 光猫 → 主路由器（WAN连接）
   • 主路由器 → 各电脑（LAN连接）

3. 样式配置 ：

   • 默认节点：天蓝色填充，蓝色边框
   • 默认边：浅蓝色实线

4.3 运行效果描述

• 将看到4个蓝色圆形节点，标签清晰可见
• 节点之间用浅蓝色线条连接
• 自动布局排列成树状结构
• 支持画布拖拽和缩放操作

五、常见问题排查

5.1 节点不显示？

✅ 检查项：

1. 确认所有节点都有id字段
2. 检查id是否重复
3. 确认容器元素已正确挂载

5.2 边不显示？

✅ 检查项：

1. 确认source和target的值正确
2. 检查引用的节点id确实存在
3. 确认边数据在edges数组中

5.3 布局混乱？

✅ 解决方案：

1. 显式设置节点坐标：

nodes: [
  { id: 'A', x: 100, y: 100 },
  { id: 'B', x: 300, y: 200 }
]

1. 使用布局算法：

const graph = new G6.Graph({
  // ...其他配置
  layout: {
    type: 'force', // 力导向布局
    preventOverlap: true
  }
});

六、最佳实践建议

1. ID命名规范 ：

   // 好的示例
   { id: 'core_switch_01' }
   
   // 不好的示例 ❌
   { id: '节点1' } // 避免中文
   { id: ' ' }    // 不要用空格

2. 动态更新数据 ：

   // 在React组件中
   const [graphData, setGraphData] = useState(initialData);
   
   // 添加新节点
   const addNode = () => {
     setGraphData(prev => ({
       nodes: [...prev.nodes, { id: 'newNode' }],
       edges: prev.edges
     }));
   };

3. 数据校验工具 ：

   // 验证数据格式
   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