Antv G6实践记录

本文主要记录在使用g6的过程中遇到的一些小坑以及解决方案

1. @antv/g6-react-node 无法正确识别自定义节点中的 anchorPoints

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
      x: 100,
      y: 200,
      // 该节点可选的连接点集合，该点有两个可选的连接点
      anchorPoints: [
        [0, 1],
        [0.5, 1],
      ],
      type: 'rect',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
      // 该边连入 source 点的第 0 个 anchorPoint，
      sourceAnchor: 0,
      // 该边连入 target 点的第 0 个 anchorPoint，
      targetAnchor: 0,
      style: {
        endArrow: true,
      },
    },
  ],
};

解决方法

重写自定义节点的 getAnchroPoints

G6.registerNode(FlowDetailType.Start, createNodeFromReact(Start));

改写为

const startNode = createNodeFromReact(Start);
  startNode.getAnchorPoints = function (cfg) {
  return cfg.anchorPoints;
};
G6.registerNode(FlowDetailType.Start, startNode);

3. 折线问题

用了g6的流程图布局之后效果还是不理想

若设置controlPoints计算出来的拐点会有点奇怪

解决方案

使用自定义折线，但是这个方法的缺点是拐点的弧度设置不了稍微有些不好看，
弧度解决方式：https://github.com/antvis/G6/issues/4463

    G6.registerEdge('line-arrow', {
      draw(cfg, group) {
        const startPoint = cfg.startPoint;
        const endPoint = cfg.endPoint;
        const shape = group.addShape('path', {
          attrs: {
            stroke: '#C0C4CC',
            radius: 10,
            lineWidth: 1,
            path: [
              ['M', startPoint.x, startPoint.y],
              ['L', startPoint.x, endPoint.y - 40],
              ['L', endPoint.x, endPoint.y - 40],
              ['L', endPoint.x, endPoint.y],
            ],
            endArrow: true,
          },
          name: 'path-shape',
        });
        if (cfg.label) {
          group.addShape('text', {
            attrs: {
              text: cfg.label,
              fill: '#595959',
              textAlign: 'center',
              textBaseline: 'middle',
              x: endPoint.x,
              y: endPoint.y - 40,
            },
            name: 'right-text-shape',
          });
        }
        return shape;
      },
    });
    
   

最终效果