如何避免節點上的線重疊並重新路由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>