React-xarrows多箭头重叠问题：如何实现同表间箭头全部可见？

问题场景 #

使用react-xarrows实现图表内表格间的箭头连接时，若两张表格存在多个关联链接，箭头会相互重叠，3-4个箭头仅能看到1个。

原箭头渲染代码：

const getArrows = () => {
        let arrows = [];

        diagram.areas?.map((area) => {
            area.foreignKeys?.map((link, key) => {                
                arrows.push(
                    <div >
                      <Xarrow
                        start={link.sourceTableName}
                        end={link.targetTableName}
                        path="straight"
                        headShape="arrow1"
                        headSize={12}
                        startAnchor={startAnchorVariants}
                        endAnchor={endAnchorVariants}
                        zIndex={arrowIsShawn}
                        color={area.color}
                        strokeWidth={arrowWidth}
                        key={link.name}
                        passProps={{
                            onClick: (event) => onDeleteArrowHandler(link.name)
                        }}                        
                    />                       
                    </div>                    
                );
            });
        });
        return arrows;
    };

此前尝试通过固定模3的锚点偏移调整，但箭头仍过于接近，甚至出现多余箭头。

可行解决方案 #

1. 按分组动态计算锚点偏移 #

核心思路：先将同一来源-目标表格对的链接分组，再给组内每个箭头分配递增的偏移量，让箭头在垂直/水平方向均匀分散。

修改后的代码：

const getArrows = () => {
  let arrows = [];
  // 按source-target分组，统计同组链接数量
  const linkGroups = {};
  diagram.areas?.forEach(area => {
    area.foreignKeys?.forEach(link => {
      const groupKey = `${link.sourceTableName}-${link.targetTableName}`;
      if (!linkGroups[groupKey]) linkGroups[groupKey] = [];
      linkGroups[groupKey].push({ link, area });
    });
  });

  // 遍历每组，计算每个箭头的偏移
  Object.values(linkGroups).forEach(group => {
    const groupSize = group.length;
    const offsetStep = 16; // 偏移步长，可根据表格大小调整
    // 居中偏移，避免箭头整体偏到一侧
    const baseOffset = -(groupSize - 1) * offsetStep / 2;

    group.forEach((item, index) => {
      const { link, area } = item;
      const currentOffset = baseOffset + index * offsetStep;
      // 若表格是横向排列，可改用x方向偏移
      const anchorOffset = { y: currentOffset };

      arrows.push(
        <Xarrow
          key={link.name}
          start={link.sourceTableName}
          end={link.targetTableName}
          path="straight"
          headShape="arrow1"
          headSize={12}
          startAnchor={{ position: "auto", offset: anchorOffset }}
          endAnchor={{ position: "auto", offset: anchorOffset }}
          zIndex={arrowIsShawn + index} // 递增z-index，避免完全遮挡
          color={area.color}
          strokeWidth={arrowWidth}
          passProps={{ onClick: () => onDeleteArrowHandler(link.name) }}
        />
      );
    });
  });

  return arrows;
};

2. 使用曲线路径替代直线 #

直线路径极易重叠，改用path="smooth"曲线，并给每个箭头设置不同曲率，让箭头自然散开：

// 在箭头渲染时添加curvature参数
curvature: 0.4 + index * 0.2, // 曲率随索引递增，每个箭头弯曲程度不同

3. 辅助调整：透明度与层级 #

若仍有轻微重叠，可给箭头设置渐变透明度和层级，让下层箭头可见：

opacity: 0.75 + index * 0.08, // 从0.75到1.0递增
zIndex: arrowIsShawn + index, // 层级递增

内容的提问来源于stack exchange，提问作者Maria Avanova