如何在D3.js中重绘连线以避免连线穿过其他节点发生碰撞

实现方案（不依赖force graph） #

核心逻辑是先做连线与节点的碰撞检测，再根据碰撞结果调整连线的绘制路径，具体实现步骤如下：

• 第一步：实现线段与节点的碰撞检测工具函数
  所有节点都已知x、y坐标和半径r，你可以封装如下检测函数，判断起点到终点的线段是否和某节点发生碰撞：

  // 计算点到线段的最短距离
  function getDistanceFromPointToLine(point, lineStart, lineEnd) {
    const A = point.x - lineStart.x;
    const B = point.y - lineStart.y;
    const C = lineEnd.x - lineStart.x;
    const D = lineEnd.y - lineStart.y;
    const dot = A * C + B * D;
    const lenSq = C * C + D * D;
    let param = -1;
    if (lenSq != 0) param = dot / lenSq;
    let xx, yy;
    if (param < 0) {
      xx = lineStart.x;
      yy = lineStart.y;
    } else if (param > 1) {
      xx = lineEnd.x;
      yy = lineEnd.y;
    } else {
      xx = lineStart.x + param * C;
      yy = lineStart.y + param * D;
    }
    const dx = point.x - xx;
    const dy = point.y - yy;
    return Math.sqrt(dx * dx + dy * dy);
  }
  
  // 检测连线是否碰撞节点
  function isLineHitNode(lineStart, lineEnd, node, offset = 5) {
    // 最短距离小于节点半径+预留偏移即判定碰撞
    return getDistanceFromPointToLine(node, lineStart, lineEnd) < (node.r + offset)
  }
  

• 第二步：碰撞后的路径调整，两种可选方案：
  1. 贝塞尔曲线绕开（和预期效果图效果一致）
     检测到碰撞节点后，计算连线的法向量方向，沿着法向量往远离碰撞节点的方向偏移生成贝塞尔控制点，将原来的直线路径替换为二次贝塞尔曲线：

  function generatePath(start, end, hitNode) {
    if (!hitNode) {
      // 无碰撞直接返回直线
      return `M ${start.x} ${start.y} L ${end.x} ${end.y}`
    }
    // 计算连线方向的法向量
    const dx = end.x - start.x;
    const dy = end.y - start.y;
    const len = Math.sqrt(dx*dx + dy*dy);
    // 法向量方向：判断碰撞节点在连线的哪一侧
    const cross = dx * (hitNode.y - start.y) - dy * (hitNode.x - start.x);
    const offsetDir = cross > 0 ? 1 : -1;
    // 控制点偏移量，可根据节点大小调整
    const offset = hitNode.r * 2.5;
    const controlX = (start.x + end.x) / 2 + offsetDir * offset * dy / len;
    const controlY = (start.y + end.y) / 2 - offsetDir * offset * dx / len;
    // 生成二次贝塞尔曲线路径
    return `M ${start.x} ${start.y} Q ${controlX} ${controlY} ${end.x} ${end.y}`
  }
  

  2. 折线绕开
     如果需要用直线形式的连线，可在碰撞节点两侧各加一个拐点，拐点距离碰撞节点边界预留5-10px的空隙即可，连线路径会自动从两个拐点绕过碰撞节点。
• 第三步：批量处理所有边
  遍历每条边时，拿当前边的起点、终点，遍历所有其他节点做碰撞检测，如果存在多个碰撞节点，可依次叠加多个贝塞尔控制点或者多个拐点，即可实现多节点阻挡下的自动绕路。

该方案完全不依赖force graph的力模拟逻辑，不管你的节点是固定位置布局还是支持拖拽的动态布局都可以直接适配。

内容的提问来源于stack exchange，提问作者Kishor Kumar