聊聊 G6：做图编辑器时绕不开的几个概念

我是怎么开始接触 G6 的

第一次需要做流程与关系型可视化时，我开始研究 AntV G6。它是蚂蚁数据可视化团队开源的图可视化引擎，能用来搭建图可视化、图分析或图编辑器应用。

这里的「图」并不是普通图表，而是由节点、边与关系组成的网络结构：例如工作流、组织关系、数据血缘、审批链路等。

为什么最后选了 G6

在 X6、D3.js、ECharts 等方案中选择时，G6 更适合需要「图数据 + 强交互 + 高定制」的业务场景。

选择 G6 的主要原因：

生态成熟：用户群体较大，有较丰富的案例和实践；
中文文档友好：中文资料完善，且项目持续维护；
高定制能力：节点、边、Combo、布局和交互都可以按业务场景扩展；
交互可控：不同于以展示为主的可视化库，G6 原生支持拖拽、缩放、选中、编辑、连线等可控交互。

如果目标是流程设计器、拓扑图、关系图或图编辑器，G6 提供的抽象更贴近问题本身；如果只是常规统计图表，ECharts 通常更轻量；如果需要更偏流程编排和画布编辑的能力，也可以结合 X6 的场景特性进行评估。

看过一些案例后，我想到的产品方向

可以先从以下案例中感受 G6 的表现形式：

结合现有产品，G6 可以尝试应用于：

数据源预处理可视化；
通过可视化编辑自定义工作流，实现工单审批流程，例如自定义审批对象、审批步骤等；
优化任务同步的可视化表达；
看板、报告模块中的关系型可视化；
更多涉及流程、依赖、关联关系的场景。

真正上手前，先弄清这些概念

G6 的核心由 Graph、图元素、布局、交互与事件、动画和插件构成：

G6 核心概念

1. Graph

官方将 Graph 定义为由主体（objects）与关系（relationships）组成的图。

从工程视角理解，Graph 很像 Vue 中的一个 Vue 实例：它既是承载图元素的容器，又挂载了操作图的各种方法。Graph 也有生命周期：初始化 → 加载数据 → 渲染 → 更新 → 销毁。

一般来说，一个图编辑器页面会持有一个 Graph 实例，节点增删改查、布局刷新、状态更新和事件监听都围绕它展开。

2. 图元素

图元素包括三类：节点（Node）、边（Edge）、Combo（类似 Node Group）。每种图元素都可以由多个 Shape 组合而成。

Shape 就是基础图形，例如矩形、圆形、文本等。G6 内置了大量节点、边和 Combo，也支持通过组合 Shape 自定义它们的外观与行为。

G6 基础 Shape：Circle 与 Rect

图元素拥有许多公共属性和方法，同时不同元素也有各自特殊的配置能力。

节点（Node）

内置节点类型包括：circle、rect、ellipse、diamond、triangle、star、image、modelRect、donut。

G6 内置节点类型

当内置节点无法满足需求时，可以通过 G6.registerNode(typeName, nodeDefinition, extendedNodeType) 注册自定义节点，实现更符合业务语义的展示。

例如自定义六边形节点时，核心思路是通过数学计算确定六个顶点坐标，再使用 polygon 多边形 Shape 自动连接顶点。

边（Edge）

内置边类型包括：

类型	说明
`line`	直线，不支持控制点。
`polyline`	折线，支持多个控制点。
`arc`	圆弧线。
`quadratic`	二阶贝塞尔曲线。
`cubic`	三阶贝塞尔曲线。
`cubic-vertical`	垂直方向的三阶贝塞尔曲线，不考虑外部传入控制点。
`cubic-horizontal`	水平方向的三阶贝塞尔曲线，不考虑外部传入控制点。
`loop`	自环。

G6 内置边类型

自定义边的思路与自定义节点类似：通过注册类型并组合 Shape，构造符合业务表达的线条、箭头、标签或动画效果。

Combo

Combo 可以简单理解为将多个节点或边整合到一个 Group 中。它能表达组织、模块、阶段等分组关系，也能支持分组折叠、展开等操作。

G6 Combo 分组示例

内置 Combo 包含 circle 与 rect 两种类型；也可以按需自定义。可参考 G6 v4 自定义 Combo 文档。

3. 图布局与布局算法

理解基础元素之后，需要通过一套规则将元素组织、展示出来。布局算法负责计算图元素的坐标信息，通常只计算 x、y，不承担渲染职责。因此，也可以引入外部算法生成坐标后交给 G6 渲染。

内置布局

类型	适用场景或特点
Random Layout	随机布局。
Force Layout	经典力导向布局，适合人物关系、计算机网络等关系网络。
Circular Layout	环形布局。
Radial Layout	辐射状布局。
MDS Layout	高维数据降维布局。
Fruchterman Layout	一种力导向布局。
Dagre Layout	层次布局。
Concentric Layout	同心圆布局，将重要节点（默认以度数衡量）放在中心。
Grid Layout	格子布局，按默认数据顺序或指定顺序排列节点。

力导向布局的核心是：节点之间具有引力与斥力，从随机无序的初始状态不断演变，最终达到相对平衡稳定的布局。

树图布局

Dendrogram Layout：树状布局，叶子节点对齐在同一层；
CompactBox Layout：紧凑树布局；
Mindmap Layout：脑图布局；
Indented Layout：缩进布局。

如果内置布局不能满足需求，也可以实现自定义布局。参考 G6 v4 自定义布局文档。

4. 图的交互与事件

Behavior

Behavior 是 G6 定义图上交互事件的机制，用来决定图如何响应拖拽、缩放、选择等交互。常见交互可以直接使用内置 Behavior，也可以注册自定义 Behavior。

自定义方式可参考 G6 v4 自定义 Behavior 文档。

交互模式 Mode

Mode 用来管理一组 Behavior。它解决的是同一张图在不同使用状态下需要不同交互的问题：例如编辑模式需要拖拽节点，只读模式则不应允许拖拽。G6 默认使用 default 模式。

状态 State

State 是节点或边的状态。常见场景是某个事件触发后，改变元素状态并呈现不同样式。

// 设置状态。
// item 为需要更新的节点或边实例；stateValue 也可只传布尔值，此时 state 为二值状态。
graph.setItemState(item, 'stateName', 'stateValue');

// 鼠标移入某节点时，设置 hover 状态。
graph.on('node:mouseenter', (e) => {
  const { item } = e;
  graph.setItemState(item, 'hover', true);
});

// 在 suspect 和 ill 两种状态下配置不同样式。
'bodyState:suspect': {
  fill: 'green',
},
'bodyState:ill': {
  fill: 'red',
},

监听与绑定事件

除了 Behavior 之外，也可以直接监听特定事件或时机。G6 中的事件大致可以分为：

画布、全局图形层事件：mousedown、mouseup、click、mouseenter、mouseleave 等；
节点、边事件：例如 node:mousedown、edge:click，事件名为 type:eventName；
增删改时机事件：例如 beforeadditem、afteradditem；
状态变更事件：例如 beforerefreshitem、afterrefreshitem；
布局时机事件：例如 beforelayout、afterlayout。

// 监听画布内、全局的点击事件。
graph.on('click', (ev) => {
  // ...
});

// 监听节点点击。
graph.on('node:click', (e) => {
  // ...
});

完整事件列表可查阅 G6 v4 Event API。

在 Vue 里使用时的一些习惯

G6 还提供了丰富的扩展能力，例如 Minimap、Grid 网格等插件，以及全局动画和元素动画。

在 Vue 项目中使用时，可以遵循几个基本原则：

在组件挂载后创建 Graph，确保容器尺寸已经可用；
在数据变化时调用 Graph 的数据更新与渲染方法，而不是重复创建实例；
在组件卸载时调用 graph.destroy()，避免事件监听和画布资源泄漏；
将图配置、数据转换、事件绑定拆分为独立模块，避免把所有逻辑堆在一个组件内；
编辑模式、只读模式等不同交互状态，使用 Mode 管理，避免到处手动开关事件。

写在最后

G6 的价值并不只是把节点和连线画出来，而是提供了一整套从元素表达、布局计算到交互编辑的图应用能力。对于工作流、审批、关系分析、数据处理链路等场景，它能让复杂关系以更直观、可操作的方式呈现给用户。