1. 问题

有两个页面，使用了两种不同连接器的xflow

企业信息查询里面有一个图表

统计分析里面有一个图表

如果先打开企业信息查询，再打开统计分析，再切换回来，企业信息的图表就会乱。

2.原因

很明显是连接器或者路由配置有问题，但是单独显示是没问题的，所以猜测是一个图表的配置影响到了另一个。经过查找罪魁祸首就是注册连接器的代码。

import { Graph } from '@antv/x6';
// 连接器
Graph.registerConnector(
  'mindmap',
  function (sourcePoint, targetPoint, routerPoints, options) {
    const { x: targetX, y: targetY } = this.targetBBox;
    let { x: sourceX, y: sourceY } = this.sourceBBox;
    const gap = (targetY - sourceY) / 3;

    const pathData = `
                       M ${sourceX} ${sourcePoint.y}
                       L ${sourceX} ${sourcePoint.y + gap}
                       L ${targetPoint.x} ${sourcePoint.y + gap}
                       L ${targetPoint.x} ${targetPoint.y}
                      `;
    return pathData;
  },
  true,
);

由于两个页面都是使用Graph全局注册了一个连接器，名字叫mindmap，所以导致连接器混乱了。

3. 解决

解决方法很简单就是给这两个页面的连接器取不一样的名字。