D3.js网络图中为双向连接（A→B与B→A）实现独立链路的方法

嘿，我明白你现在的困扰——双向的连接链路重叠在一起，完全区分不出A→B和B→A的方向对吧？别担心，咱们只需要对现有代码做几个关键调整，就能让双向链路分开独立显示，下面一步步来改：

核心思路 #

原来的代码用<line>元素绘制链路，双向链路的直线会完全重合。咱们要换成<path>元素，通过给双向链路添加垂直偏移的方式让它们向两边分开，同时保留各自的方向箭头，这样就能清晰区分双向连接了。

第一步：预处理链接数据，标记双向链路的偏移方向 #

在创建模拟之前，先给你的links数组添加偏移量标记，让双向链路分别向相反方向偏移：

// 预处理links，为双向链接分配相反的偏移量
const linkPairMap = new Map();
data.links.forEach(link => {
  // 生成链接的唯一标识（兼容source/target是对象或id的情况）
  const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
  const targetId = typeof link.target === 'object' ? link.target.id : link.target;
  const linkKey = `${sourceId}-${targetId}`;
  const reverseLinkKey = `${targetId}-${sourceId}`;

  if (linkPairMap.has(reverseLinkKey)) {
    // 找到反向链接，给当前链接和反向链接分配相反的偏移量
    link.offset = 15; // 正向链接向右/下偏移
    linkPairMap.get(reverseLinkKey).offset = -15; // 反向链接向左/上偏移
    linkPairMap.delete(reverseLinkKey); // 已配对，从map中移除
  } else {
    // 暂时存入map，等待反向链接
    linkPairMap.set(linkKey, link);
    link.offset = 0; // 单向链接不偏移
  }
});

第二步：将直线链路替换为路径（Path） #

把原来创建<line>的代码改成创建<path>，同时添加箭头标记（让方向更清晰）：

// 先定义箭头标记（可选，但推荐添加，方便区分方向）
svg.append('defs').append('marker')
  .attr('id', 'arrowhead')
  .attr('viewBox', '0 -5 10 10')
  .attr('refX', 20) // 箭头位置，根据链路长度调整
  .attr('refY', 0)
  .attr('markerWidth', 6)
  .attr('markerHeight', 6)
  .attr('orient', 'auto')
  .append('path')
  .attr('d', 'M0,-5L10,0L0,5')
  .attr('fill', '#999');

// 替换原来的link创建代码：用path代替line
const link = svg
  .append('g')
  .selectAll('path')
  .data(data.links)
  .enter()
  .append('path')
  .attr('stroke', '#999')
  .attr('stroke-opacity', 0.6)
  .attr('stroke-width', d => Math.sqrt(Number(d.cycleCount)))
  .attr('marker-end', 'url(#arrowhead)'); // 添加箭头标记

第三步：更新Tick函数，计算偏移后的路径 #

原来的tick函数是设置直线的x1/y1/x2/y2，现在要改成计算路径的d属性，利用之前标记的offset来偏移双向链路：

// 新增一个生成偏移路径的工具函数
function generateOffsetLinkPath(d) {
  const dx = d.target.x - d.source.x;
  const dy = d.target.y - d.source.y;
  const linkLength = Math.sqrt(dx * dx + dy * dy);
  
  // 如果链路长度为0（节点重叠），直接返回空路径
  if (linkLength === 0) return '';

  // 计算垂直于链路的偏移向量（保证偏移方向始终一致）
  const perpX = (-dy / linkLength) * d.offset;
  const perpY = (dx / linkLength) * d.offset;

  // 计算偏移后的起点和终点
  const startX = d.source.x + perpX;
  const startY = d.source.y + perpY;
  const endX = d.target.x + perpX;
  const endY = d.target.y + perpY;

  // 生成直线路径（如果想要更平滑的曲线，可以换成贝塞尔曲线）
  return `M ${startX},${startY} L ${endX},${endY}`;
  
  // 可选：生成带弧度的贝塞尔曲线路径，视觉效果更好
  // const midX = (startX + endX) / 2 + perpX * 2;
  // const midY = (startY + endY) / 2 + perpY * 2;
  // return `M ${startX},${startY} Q ${midX},${midY} ${endX},${endY}`;
}

// 更新simulation的tick事件处理
simulation.on('tick', () => {
  // 用工具函数生成偏移后的路径
  link.attr('d', generateOffsetLinkPath);

  node.attr('cx', d => d.x).attr('cy', d => d.y);

  // 更新链路文字的位置，跟着偏移后的链路调整
  linkText
    .attr('x', d => {
      const dx = d.target.x - d.source.x;
      const dy = d.target.y - d.source.y;
      const linkLength = Math.sqrt(dx * dx + dy * dy);
      if (linkLength === 0) return d.source.x;
      const perpX = (-dy / linkLength) * d.offset;
      return (d.source.x + d.target.x) / 2 + perpX;
    })
    .attr('y', d => {
      const dx = d.target.x - d.source.x;
      const dy = d.target.y - d.source.y;
      const linkLength = Math.sqrt(dx * dx + dy * dy);
      if (linkLength === 0) return d.source.y;
      const perpY = (dx / linkLength) * d.offset;
      return (d.source.y + d.target.y) / 2 + perpY;
    });
});

最后：验证你的links数据 #

要确保你的data.links数组里确实存在两条独立的记录：一条是{ source: "A", target: "B", ... }，另一条是{ source: "B", target: "A", ... }，这样上面的预处理代码才能识别出双向链路并添加偏移。

这样修改之后，你的双向链路就会向两侧偏移，完全分开显示，而且箭头也能清晰区分方向啦！

备注：内容来源于stack exchange，提问作者Faizan Ahmad