如何在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真值的你会得到的第一个结果。否则就是并行的例子。