数据处理总览

什么是数据处理

数据处理（ transform ），也叫数据转换器，是 G6 提供的支持在 渲染前( beforeDraw ) 或者 布局后( afterLayout ) 对绘制数据进行转化处理的机制，用户可以通过数据处理很方便地对数据处理逻辑进行封装解耦。

实现原理

基类

所有的数据处理器都是基于 BaseTransform 这个基类进行实现，里面定义了两个基类方法 beforeDraw 和 afterLayout ：

export abstract class BaseTransform<T extends BaseTransformOptions = BaseTransformOptions> extends BaseExtension<T> {
  public beforeDraw(data: DrawData, context: DrawContext): DrawData {
    return data;
  }

  public afterLayout(type: 'pre', data: DrawData): void;
  public afterLayout(type: 'post', data?: undefined): void;
  public afterLayout(type: 'pre' | 'post', data?: DrawData) {}
}

以下是这两个方法里核心的参数类型说明：

DrawData

type ProcedureData = {
  nodes: Map<ID, NodeData>;
  edges: Map<ID, EdgeData>;
  combos: Map<ID, ComboData>;
};

type DrawData = {
  add: ProcedureData; // 本次渲染需要新增的元素
  update: ProcedureData; // 本次渲染需要更新的元素
  remove: ProcedureData; // 本次渲染需要移除的元素
};

pre | post
pre：绘制前进行的布局（只会在首次布局触发）
post：完成绘制后进行的布局

执行时机

beforeDraw
下面是每次渲染时数据处理的执行流程/时机：
详细说明：
1. G6 在每次渲染前计算出 add、update、remove，分别对应为需要新增、更新、移除的元素，以下简称为 DrawData
2. 此时数据处理介入，按配置顺序执行每个数据处理的 beforeDraw 方法，参数则为 DrawData
3. 数据处理器中，对 DrawData 里面的元素数据进行改动，即可以按需对 add、update、remove 里面的元素数据进行修改、移除或者插入元素数据等，最终把改动后的 DrawData 返回给渲染主体逻辑
4. 在执行数据处理后，执行对应的新增、更新、移除元素的操作，完成渲染

提示

触发渲染的场景分为主动和被动，列举如下：

主动： 用户主动调用 graph.render() 、 graph.draw() 或者在自定义插件、交互等实例里面通过上下文拿到元素控制器（ ElementController ）实例调用 this.context.element.draw()，等（ graph.render() 和 graph.draw() 也是调用元素控制器的 draw 方法）
被动： 部分内置交互和插件有触发渲染，布局执行后也有触发渲染更新元素位置，等

afterLayout：在执行完布局计算并开始更新节点位置后，执行数据处理

内置数据处理

G6 提供给用户的内置数据处理如下：

各数据处理详细配置可参考内置数据处理文档。

数据处理名称	注册类型	功能描述	执行时机
动态调整节点大小	`map-node-size`	根据节点中心性调整节点的大小	beforeDraw
径向标签	`place-radial-labels`	根据径向布局自动调整节点标签样式，包括位置和旋转角度	afterDraw
平行边	`process-parallel-edges`	处理平行边，即多条边共享同一源节点和目标节点	beforeDraw

G6 内嵌的数据处理如下：

除了提供给用户选用的数据处理外， G6 也封装并使用了以下数据处理机制来实现基础功能。以下数据处理不开放给用户配置使用，默认必带（列举出来供用户有需要时点击查看并参考源码）：

数据处理名称	注册类型	功能描述	执行时机
调整combo绘制顺序	`arrange-draw-order`	combo 嵌套时，优先绘制子 combo	beforeDraw
处理组合的展开收起	`collapse-expand-combo`	收起时，移除 combo 内部元素、销毁内部边，外部边则连到收起的 combo 上；展开时，反之；	beforeDraw
处理（树图）节点的收起和展开	`collapse-expand-node`	绘制前，处理（树图）节点的收起和展开	beforeDraw
获取边的实际端点	`get-edge-actual-ends`	配合`collapse-expand-combo`实现收起时，combo 外部连到内部节点的边改为连到收起的 combo 上（`collapse-expand-combo`只是在收起时判断并标记了这些边需要更新端点）	beforeDraw
更新节点、combo相关边	`update-related-edges`	如果更新了节点/combo，则把连接的边也一起更新了	beforeDraw

注意

上面 G6 为实现自身基础功能使用的数据处理仅供参考，不可改动。如有需要在这些数据处理基础上做特殊处理，可通过自定义数据处理实现。

配置方式

基本配置

在图实例初始化时，通过 transforms 数组指定需要的数据处理：

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

const graph = new Graph({
  // 其他配置...
  transforms: ['process-parallel-edges'],
});

配置数据处理参数

对于需要自定义参数的数据处理，可以使用 object 形式配置属性：

const graph = new Graph({
  // 其他配置...
  transforms: [
    'place-radial-labels',
    {
      type: 'process-parallel-edges',
      key: 'process-parallel-edges-1',
      mode: 'bundle',
      distance: 30,
    },
  ],
});

动态更新数据处理

G6 支持在图实例运行期间动态管理数据处理：

可以通过 setTransforms 方法调整数据处理器：

// 添加新的数据处理器
graph.setTransforms((transforms) => [...transforms, 'place-radial-labels']);

// 移除数据处理器
graph.setTransforms((transforms) => transforms.filter((t) => t !== 'place-radial-labels'));

可以通过 updateTransform 方法更新数据处理的配置：

// 更新单个数据处理器
graph.updateTransform({
  key: 'process-parallel-edges-1',
  distance: 100,
});

注意

使用updateTransform方法时，需要在初始化时为数据处理指定唯一的key。

卸载数据处理

使用 setTransforms 方法同样可以卸载数据处理，将数据处理配置列表置为空即可：

// 卸载所有数据处理器
graph.setTransforms([]);

自定义数据处理

当内置数据处理器无法满足需求时，你可以：

继承和扩展现有数据处理
创建全新的自定义数据处理

自定义数据处理需要先注册后使用。详细教程请参考自定义数据处理文档。

import { register, ExtensionCategory } from '@antv/g6';
import { MyCustomTransform } from './my-custom-transform';

// 注册自定义数据处理器
register(ExtensionCategory.TRANSFORM, 'my-custom-transform', MyCustomTransform);

// 使用自定义数据处理
const graph = new Graph({
  transforms: ['my-custom-transform'],
});