如何在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弧路径。如果你想要一条直线，画线条路径。

类似的东西：

[Authorize(Roles = "Administrator, Manager")]
public class AdminController : Controller
{
    // no attribute needed here
    public IActionResult GetData()
    {
    }

    [Authorize(Roles = "Administrator")]
    public IActionResult RestrictedMethod()
    {
    }
}

然而，这只是解决方案的一部分。弧自然地分隔传入和传出边缘。线不。所以上面的回报看起来像是：

不错，但不是你想要的平行线。对于真正的平行线，您需要做一些额外的数学运算。您并不是真的希望您的线条瞄准节点中的中心点，而是沿着垂直于入射边缘的线从中心偏移相等的点。有一些如何进行数学运算的例子。调整one of them，我得到：

Here it is running in a live sandbox.如果您将常量return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y; 更改为真值，您将获得第一个结果。否则是并行示例。