概述

自定义数据处理允许用户在业务实现过程中，把额外的数据处理封装起来，在渲染前或者布局后对数据进行进一步处理。用户通过自定义数据处理，实现部分数据处理解耦，更好地进行管理、编排代码以及提高代码可维护性。

开始前

用户在进行自定义数据处理前，需要仔细阅读并掌握数据处理器的 实现原理和执行时机 。

代码示例

接下来将讲述两个可能的业务场景，并通过自定义数据处理来实现：

不展示游离节点

• 需求

  游离节点，即没有连线的节点，画布渲染时不展示游离节点

• 实现

  import type { DrawData, DrawContext } from '@antv/g6';
  import { Graph, BaseTransform, register, ExtensionCategory } from '@antv/g6';
  
  class HideFreeNode extends BaseTransform {
    public beforeDraw(input: DrawData, context: DrawContext): DrawData {
      const { model } = this.context;
      const { add, update, remove } = input;
  
      add.nodes.forEach((nodeData, nodeId) => {
        // 获取节点的相关连线
        const edges = model.getRelatedEdgesData(nodeId);
        // 没有任何连线的的节点则从add里面移除，添加到remove里面
        if (!edges.length) {
          add.nodes.delete(nodeId);
          remove.nodes.set(nodeId, nodeData);
        }
      });
  
      return input;
    }
  }

  (async () => {
    const { Graph, BaseTransform, register, ExtensionCategory } = window.g6;
  
    class HideFreeNode extends BaseTransform {
      beforeDraw(input, context) {
        const { model } = this.context;
        const { add, update, remove } = input;
  
        add.nodes.forEach((nodeData, nodeId) => {
          // 获取节点的相关连线
          const edges = model.getRelatedEdgesData(nodeId);
          // 没有任何连线的的节点则从add里面移除，添加到remove里面
          if (!edges.length) {
            add.nodes.delete(nodeId);
            remove.nodes.set(nodeId, nodeData);
          }
        });
  
        return input;
      }
    }
    register(ExtensionCategory.TRANSFORM, 'hide-free-node', HideFreeNode);
  
    const data = {
      nodes: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }],
      edges: [
        { source: '1', target: '2' },
        { source: '2', target: '3' },
        { source: '3', target: '5' },
      ],
    };
  
    const container = window.createContainer({ width: 600, height: 400 });
  
    const graph = new Graph({
      container,
      autoFit: 'center',
      data,
      node: {
        style: {
          labelText: (d) => d.id,
        },
      },
      layout: {
        type: 'antv-dagre',
        rankdir: 'LR',
      },
      transforms: ['hide-free-node'],
    });
  
    graph.render();
  
    return container;
  })();

• 说明

  示例中总共有6个节点，id为1-6，id为4的节点没有连线，因此被移除了。

  通过 getRelatedEdgesData 获取节点的相关连线，没有则把该节点放到 remove.nodes 里面去，并从 add.nodes 里面移除。

环形布局径向label

• 需求

  使用 环形布局 时，节点 label 的也需要像内置数据处理器 PlaceRadialLabels 一样实现径向展示（但 PlaceRadialLabels 只支持径向布局，环形布局不是径向布局）

• 实现

  import type { RuntimeContext, DrawContext, Point, TransformArray, Vector2, Vector3 } from '@antv/g6';
  import { Graph, BaseTransform, register, ExtensionCategory, BaseTransformOptions } from '@antv/g6';
  
  // 目前circular布局没有暴露方法可以获取布局中心，这里简单处理先固定一个，配置circular布局时center与这里保持一致即可
  const circularCenter = [300, 300];
  
  // 下面的函数 G6 没有暴露出来，先自行声明
  function subtract(a: Vector2 | Vector3, b: Vector2 | Vector3): Vector2 | Vector3 {
    return a.map((v, i) => v - b[i]) as Vector2 | Vector3;
  }
  function rad(a: Vector2 | Vector3): number {
    const [x, y] = a;
    if (!x && !y) return 0;
    return Math.atan2(y, x);
  }
  function rad2deg(rad: number): number {
    return rad * (180 / Math.PI);
  }
  
  interface CircularRadialLabelsOptions extends BaseTransformOptions {
    offset?: number; // 偏移量
  }
  
  class CircularRadialLabels extends BaseTransform<CircularRadialLabelsOptions> {
    static defaultOptions = {
      offset: 5,
    };
    constructor(context: RuntimeContext, options: CircularRadialLabelsOptions) {
      super(context, Object.assign({}, CircularRadialLabels.defaultOptions, options));
    }
    get center(): Point {
      return circularCenter;
    }
    public afterLayout() {
      const { graph, model } = this.context;
      const data = model.getData();
      data.nodes?.forEach((datum) => {
        const radian = rad(subtract([datum.style.x, datum.style.y], this.center));
        const isLeft = Math.abs(radian) > Math.PI / 2;
        const isLeaf = !datum.children || datum.children.length === 0;
        const nodeId = datum.id;
        const node = this.context.element?.getElement(nodeId);
        if (!node || !node.isVisible()) return;
  
        const nodeHalfWidth = graph.getElementRenderStyle(nodeId).size / 2;
        const offset = (isLeaf ? 1 : -1) * (nodeHalfWidth + this.options.offset);
  
        const labelTransform: TransformArray = [
          ['translate', offset * Math.cos(radian), offset * Math.sin(radian)],
          ['rotate', isLeft ? rad2deg(radian) + 180 : rad2deg(radian)],
        ];
  
        model.updateNodeData([
          {
            id: datum.id,
            style: {
              labelTextAlign: isLeft === isLeaf ? 'right' : 'left',
              labelTextBaseline: 'middle',
              labelTransform,
            },
          },
        ]);
      });
  
      graph.draw();
    }
  }

  (async () => {
    const { Graph, BaseTransform, register, ExtensionCategory } = window.g6;
  
    // 目前circular布局没有暴露方法可以获取布局中心，这里简单处理先固定一个
    const circularCenter = [300, 300];
  
    // 下面的函数 G6 没有暴露出来，先自行声明
    function subtract(a, b) {
      return a.map((v, i) => v - b[i]);
    }
    function rad(a) {
      const [x, y] = a;
      if (!x && !y) return 0;
      return Math.atan2(y, x);
    }
    function rad2deg(rad) {
      return rad * (180 / Math.PI);
    }
  
    class CircularRadialLabels extends BaseTransform {
      static defaultOptions = {
        offset: 5,
      };
      constructor(context, options) {
        super(context, Object.assign({}, CircularRadialLabels.defaultOptions, options));
      }
      get center() {
        return circularCenter;
      }
      afterLayout() {
        const { graph, model } = this.context;
        const data = model.getData();
        data.nodes?.forEach((datum) => {
          const radian = rad(subtract([datum.style.x, datum.style.y], this.center));
          const isLeft = Math.abs(radian) > Math.PI / 2;
          const isLeaf = !datum.children || datum.children.length === 0;
          const nodeId = datum.id;
          const node = this.context.element?.getElement(nodeId);
          if (!node || !node.isVisible()) return;
  
          const nodeHalfWidth = graph.getElementRenderStyle(nodeId).size / 2;
          const offset = (isLeaf ? 1 : -1) * (nodeHalfWidth + this.options.offset);
  
          const labelTransform = [
            ['translate', offset * Math.cos(radian), offset * Math.sin(radian)],
            ['rotate', isLeft ? rad2deg(radian) + 180 : rad2deg(radian)],
          ];
  
          model.updateNodeData([
            {
              id: datum.id,
              style: {
                labelTextAlign: isLeft === isLeaf ? 'right' : 'left',
                labelTextBaseline: 'middle',
                labelTransform,
              },
            },
          ]);
        });
  
        graph.draw();
      }
    }
  
    register(ExtensionCategory.TRANSFORM, 'circular-radial-labels', CircularRadialLabels);
  
    const data = {
      nodes: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' }],
      edges: [
        { source: '1', target: '2' },
        { source: '2', target: '3' },
        { source: '3', target: '4' },
        { source: '4', target: '5' },
        { source: '5', target: '6' },
        { source: '6', target: '1' },
      ],
    };
  
    const container = window.createContainer({ width: 600, height: 400 });
  
    const graph = new Graph({
      container,
      autoFit: 'center',
      data,
      node: {
        style: {
          labelText: (d) => 'label' + d.id,
          size: 30,
        },
      },
      layout: {
        type: 'circular',
        width: 200,
        center: circularCenter,
        preLayout: false, // 不能是渲染前布局，否则不生效
      },
      transforms: ['circular-radial-labels'],
    });
  
    graph.render();
  
    return container;
  })();

• 说明 上面的实现基本是参考内置数据处理器 PlaceRadialLabels 来实现的，区别是这里的实现是通过拿到布局中心来计算偏移和旋转，具体可参考 PlaceRadialLabels 的 源码