如何避免节点上的线重叠并重新路由d3js中的线

【问题标题】：How to avoid the line overlapping on node and reroute the line in d3js如何避免节点上的线重叠并重新路由d3js中的线
【发布时间】：2021-08-18 10:28:49
【问题描述】：

我正在动态添加圆圈并像这样保持圆圈之间的连接

let drawLine = d3.svg.line().x(d => d[0]).y(d => d[1]);

let path = svg.append('path').
  attr('stroke', 'red').
  attr('stroke-width', 5).
  attr('fill', 'none').
  attr('d', drawLine([[x1, y1], [x2, y2]]));

当我动态添加节点时，如果节点上有任何重叠的连接，那么我想在不同的路径中重新路由该线（任何不应在任何节点上重叠的路径）Static example

在上面的例子中，有 3 个圆，两个大圆之间有连接。连接的路径重叠在中间的一个小圆圈上。所以我想在这两个圆圈之间保持相同的连接，但它不应该在节点上重叠。我是 d3 的新手，我不确定 d3.svg.line() 是否是维持节点之间非重叠连接的正确方法。请提出建议。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您可以改用二次贝塞尔曲线：

let svg = d3.select('#panel')
svg.append('circle')
   .attr('r', 40)
   .attr("cx", 50)
   .attr("cy", 50);
      
   svg.append('circle')
   .attr('r', 40)
   .attr("cx", 350)
   .attr("cy", 50);
   
   svg.append('circle')
   .attr('r', 20)
   .attr("cx", 200)
   .attr("cy", 50);
   
   let lineGenerator = d3.svg.line().x(d => d[0]).y(d => d[1]);
   
   const quadraticBezierLineGenerator = d => 
    `M ${d[0][0]},${d[0][1]} Q ${(d[0][0] + d[1][0])/2}, ${d[0][1] - 60} ${d[1][0]},${d[1][1]}`;
   
   
   let path = svg.append('path').
      attr('stroke', 'red').
      attr('stroke-width', 5).
      attr('fill', 'none').
      attr('d', quadraticBezierLineGenerator([[92, 50], [309, 50]]));

    svg {
      width: 100%;
      height: 100%;
    }
    
    svg circle {
      fill: white;
      stroke: black;
      stroke-width: 3;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<svg id="panel"></svg>

【讨论】：