javascript - 如何在d3力布局中实现两个方向的平行边缘？

Question

嗨，我正在尝试在 d3 力布局中实现并行链接。

下面是我的代码

function tick() {

  link.attr("d", linkArc);
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}
function linkArc(d) {

  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
    dr = (d.straight == 0)? Math.sqrt(dx * dx + dy * dy): 0;

  return "M" + d.source.x + "," + d.source.y +
      "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

但我仍然收到弯曲的链接。请将此作为示例 http://bl.ocks.org/d3noob/5141278

Answer 1

您最大的问题是您仍在绘制 SVG 弧线路径。如果你想要一条直线，请绘制线条路径。

类似于:

return "M" + d.source.x + "," +  d.source.y + "L" + 
       d.target.x + "," + d.target.y;

但这只是解决方案的一部分。弧线自然地将传入边缘和传出边缘分开。线条没有。所以上面的返回看起来像这样:

不错，但不是你想要的平行线。对于真正的平行线，您需要做一些额外的数学运算。您实际上并不希望您的线瞄准节点中的中心点，而是沿着垂直于传入边缘的线从中心均匀偏移的点。有一些关于如何进行数学计算的示例。适应one of them ，我得到:

Here it is running in a live sandbox.如果将常量 conincidentLines 更改为真值，您将得到第一个结果。否则为并行示例。