AntV G6 | 流年石刻

要彻底搞懂 AntV G6，不能只看 API 文档（因为它的文档在 v4 和 v5 之间有巨大的断层，容易让人迷失），而必须建立起一套**“图可视化引擎”的底层思维模型**。

G6 的本质不是“画图工具”，而是一个关系数据的渲染与交互引擎。它的核心任务只有一个：将抽象的节点（Node）和边（Edge）数据，转化为屏幕上的像素，并响应用户的操作。

以下是从底层逻辑到实战应用的系统化解析。

1. 核心定位：G6 到底是什么？

在阿里的 AntV 体系中，很多人分不清 G6 和 X6。这是第一步要明确的：

G6 (Graph Analysis): 侧重自动布局和海量数据分析。如果你有一堆数据（如社交网络、资金流向），不知道它们长什么样，需要 G6 帮你算位置、画出来。
X6 (Diagram Editing): 侧重手动编辑和流程图。如果你需要做一个类似 Visio 的画板，让用户拖拽节点连线，选 X6。

结论： G6 的强项在于“根据数据算图形”，而不是“提供画板让人画”。

2. 架构解构：G6 的“第一性原理”

G6 的运行机制可以拆解为四个步骤：

数据 (Data) -> 布局 (Layout) -> 元素 (Element) -> 渲染与交互 (Rendering & Behavior)

A. 数据（Data）：一切的起点

G6 的数据结构非常标准，必须包含两个核心数组：

JavaScript

const data = {
  nodes: [
    { id: 'n1', data: { label: '用户A', value: 100 } }, // id 是唯一索引
    { id: 'n2', data: { label: '用户B', value: 200 } }
  ],
  edges: [
    { source: 'n1', target: 'n2', data: { weight: 1 } } // 描述关系
  ],
  // 可选：combos（节点分组）
};

注意： 在 G6 v5 中，推荐将业务数据放在 data 字段下，与图形配置（如 style, x, y）分离。

B. 布局（Layout）：决定“在哪画”

这是 G6 最核心的能力。计算机不知道节点该放在屏幕哪个位置，布局算法负责计算每个节点的 (x, y) 坐标。

力导向 (Force): 模拟物理引力和斥力，适合无规律的复杂网络（如黑产团伙挖掘）。
树图 (Tree): 脑图、组织架构图。
圆形/网格 (Circular/Grid): 适合展示分类或资源分配。
Dagre: 层次布局，适合有方向的依赖关系（如任务流）。

关键点： 布局是耗时的。对于几千个节点，Layout 计算可能阻塞主线程，通常需要使用 Web Worker 或 GPU 加速布局（G6 支持）。

C. 元素（Element）：决定“画什么”

G6 将图元素分为三类：

Node (节点): 圆、矩形、图片等。
Edge (边): 直线、曲线、贝塞尔曲线。
Combo (分组): 包裹一组节点的容器（可收起/展开）。

自定义能力的边界：

这是新手最容易卡住的地方。虽然 G6 内置了很多形状，但实际业务中（例如：要在节点里画一个饼图，旁边加个状态灯，右上角挂个 Badge），内置形状通常不够用。

React/Vue 节点： G6 支持用 HTML/React 组件渲染节点（性能较差，适合节点少的情况）。
Canvas 图形节点： 性能最好。你需要基于 G 渲染引擎（AntV 底层的 Canvas 库）组合 Circle, Rect, Text 来绘制。这是高阶使用的必经之路。

D. 交互（Behavior）：决定“怎么动”

G6 将交互逻辑封装为 Behaviors（行为）。

不要自己去监听 canvas.on('mousedown') 来实现拖拽。
配置式交互： 直接在配置里加 drag-canvas (拖拽画布), zoom-canvas (缩放), drag-node (拖拽节点)。
交互模式 (Modes): G6 允许定义不同的模式。例如 default 模式下可以点击查看详情，edit 模式下可以连线。通过 graph.setMode('edit') 瞬间切换整套交互逻辑。

3. 关键版本差异：v4 vs v5

这是一个必须要诚实面对的现状：G6 目前处于 v4 到 v5 的过渡期，这是一个巨大的坑。

G6 v4: 也就是目前的稳定版（3.x/4.x），文档全，社区插件多，但在处理 10万+ 节点时性能有瓶颈，API 设计比较面向对象（Class-based）。
G6 v5 (G6 5.0): 全新重构。底层换了渲染引擎，性能极强（支持 WebGL），API 变成了更加声明式的配置（Specification-based）。

建议： 如果你现在开始新项目，且追求长期维护，建议直接学习 v5，虽然文档可能还在完善中，但它是未来。下面的代码示例将基于v5 的思维（配置化）。

4. 实战系统化流程

第一阶段：初始化与渲染

不要把配置写死在一坨代码里，要分层。

JavaScript

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

// 1. 实例化
const graph = new Graph({
  container: 'container', // DOM 容器
  width: 800,
  height: 600,
  // 2. 全局配置 (样式映射)
  node: {
    style: {
      fill: '#F6BD16', // 默认填充色
      size: 20,
    },
    // 状态样式 (比如 hover 变红)
    state: {
      hover: {
        fill: 'red',
      },
    },
  },
  edge: {
    style: {
      stroke: '#e2e2e2',
      endArrow: true,
    },
  },
  // 3. 布局配置
  layout: {
    type: 'force', // 力导向布局
    preventOverlap: true, // 防止重叠
  },
  // 4. 交互行为
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'click-select'],
});

// 5. 加载数据并渲染
graph.setData(data);
graph.render();

第二阶段：业务逻辑映射（Mapper）

这是让图表“活”起来的关键。不要在数据里硬编码颜色。使用 G6 的 Mapper 机制。

JavaScript

// 这里的逻辑是：节点大小取决于 value 字段，颜色取决于 type 字段
graph.setOptions({
  node: {
    style: (d) => ({
        size: Math.sqrt(d.data.value) * 5, 
        fill: d.data.type === 'risky' ? 'red' : 'green',
    })
  }
});
graph.render();

第三阶段：事件系统

G6 的事件系统非常精细。

node:click: 点击节点
edge:mouseenter: 鼠标移入边
canvas:click: 点击空白处

JavaScript

graph.on('node:click', (e) => {
  const { id } = e.target.id;
  // 业务逻辑：比如右侧弹出详情抽屉
  showDetailDrawer(id);
  
  // 视觉反馈：高亮该节点及其邻居
  graph.setItemState(id, 'selected', true);
});

5. 进阶难点：如何处理复杂场景？

场景一：海量数据性能优化（LOD - Level of Detail）

当图上有 10,000 个节点时，浏览器会卡死。

策略 1： 使用 G6 的 WebGL 渲染模式（v5 支持更好）。
策略 2： 缩放聚合。当缩小（Zoom out）时，隐藏 Label 和细节，只画点；当放大（Zoom in）时，再显示文字。这可以通过监听 viewportchange 事件动态更新样式实现。

场景二：复杂的自定义节点

如果设计稿要求节点长得像个“服务器面板”，包含 IP、状态灯、CPU 进度条。

做法： 注册自定义节点 (Register Node)。利用 G (AntV 的绘图库) 的 Group 概念，像搭积木一样把 Shape 组合起来。
布局技巧： 不要写死像素值，尽量相对定位，否则文字一长就坏了。

场景三：动态更新

实时数据流进来，图需要动。

不要每次都 graph.read(newData) 重绘，这会让图闪烁且布局重算。
使用 graph.updateData 和 graph.changeData，配合 layout.tick() (如果是力导向图) 来平滑过渡。

6. 避坑指南（基于事实的评估）

文档陷阱： 搜索 G6 问题时，务必看清是 3.x, 4.x 还是 5.x。很多旧代码在 v5 里完全跑不通（例如 v4 的 cfg 参数在 v5 变成了 style 属性）。
布局抖动： 力导向布局虽然酷，但用户不喜欢每次刷新图都在变。
- 解决： 布局计算完成后，保存每个节点的 (x, y) 到数据库。下次加载时，直接读取坐标，设为 preset 布局，图就是静止的。
React/Vue 封装： 官方提供了一些 React 组件，但通常很难用且不灵活。最佳实践是自己写一个 useEffect (React) 或 onMounted (Vue) 钩子来管理 G6 实例的生命周期，不要过度依赖第三方封装的 G6 组件库。

总结

G6 是一个重配置、轻绘图的引擎。

入门：掌握 data -> layout -> render 的流。
进阶：掌握 style mapper (样式映射) 和 behavior (交互)。
精通：掌握 Custom Node (底层绘图) 和 Algorithm (图算法分析)。

你目前具体的应用场景是什么？（是做知识图谱、风控链路、还是简单的拓扑图？）告诉我场景，我可以针对性地给出那个场景下的配置模板。

const data = { nodes: [ { id: 'n1', data: { label: '用户A', value: 100 } }, // id 是唯一索引 { id: 'n2', data: { label: '用户B', value: 200 } } ], edges: [ { source: 'n1', target: 'n2', data: { weight: 1 } } // 描述关系 ], // 可选：combos（节点分组） };

import { Graph } from '@antv/g6'; // 1. 实例化 const graph = new Graph({ container: 'container', // DOM 容器 width: 800, height: 600, // 2. 全局配置 (样式映射) node: { style: { fill: '#F6BD16', // 默认填充色 size: 20, }, // 状态样式 (比如 hover 变红) state: { hover: { fill: 'red', }, }, }, edge: { style: { stroke: '#e2e2e2', endArrow: true, }, }, // 3. 布局配置 layout: { type: 'force', // 力导向布局 preventOverlap: true, // 防止重叠 }, // 4. 交互行为 behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'click-select'], }); // 5. 加载数据并渲染 graph.setData(data); graph.render();

// 这里的逻辑是：节点大小取决于 value 字段，颜色取决于 type 字段 graph.setOptions({ node: { style: (d) => ({ size: Math.sqrt(d.data.value) * 5, fill: d.data.type === 'risky' ? 'red' : 'green', }) } }); graph.render();

graph.on('node:click', (e) => { const { id } = e.target.id; // 业务逻辑：比如右侧弹出详情抽屉 showDetailDrawer(id); // 视觉反馈：高亮该节点及其邻居 graph.setItemState(id, 'selected', true); });