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

Question

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

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 示例

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

Answer 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>