如何在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真值的你會得到的第一個結果。否則就是並行的例子。