D3可以強制佈局可視化多圖嗎？

Question

D3強制佈局中，如果在兩個節點之間存在多個鏈接，D3只會挑選一個而忽略其他節點。是否有可能可視化多圖？

Answer 1

您可以通過創建一組鏈接，每個鏈接的形式爲一束平凡的編碼您的多重圖作爲圖：

{"links": [/* one or more links*/], "source": …, "target": …} 

然後，您可以運行力導向佈局按往常一樣放置您的節點。然後，您需要適當地表示每個捆綁包，例如通過繪製平行線。

相關：邁克·博斯托克用一個簡單的黑客來表示two parallel links between nodes，雖然這不容易擴展到更多的鏈接。

Answer 2

因此，事實證明，d3 確實呈現節點之間的多個鏈接，它只是將它們繪製在另一個之上。我解決這個問題的方法是將鏈接繪製爲路徑（而不是線條）併爲每個路徑添加一條不同的曲線。這意味着每個鏈接對象都需要一些東西來區分它與其他源節點和目標節點相同。我的鏈接看起來是這樣的：

links: [ 
    {"source": 0,"target": 1,"count": 1}, 
    {"source": 1,"target": 2,"count": 1}, 
    {"source": 1,"target": 3,"count": 1}, 
    {"source": 1,"target": 4,"count": 1}, 

    // same source and target with greater count 
    {"source": 1,"target": 4,"count": 2}, 
    {"source": 1,"target": 4,"count": 3}, 
    {"source": 1,"target": 4,"count": 4} 
] 

，然後將該路徑渲染代碼看起來像

function tick() { 
    link.attr("d", function(d) { 
    var x1 = d.source.x, 
     y1 = d.source.y, 
     x2 = d.target.x, 
     y2 = d.target.y, 
     dx = x2 - x1, 
     dy = y2 - y1, 
     // Set dr to 0 for straight edges. 
     // Set dr to Math.sqrt(dx * dx + dy * dy) for a simple curve. 
     // Assuming a simple curve, decrease dr to space curves. 
     // There's probably a better decay function that spaces things nice and evenly. 
     dr = Math.sqrt(dx * dx + dy * dy) - Math.sqrt(300*(d.count-1)); 

    return "M" + x1 + "," + y1 + "A" + dr + "," + dr + " 0 0,1 " + x2 + "," + y2; 
    }); 

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
} 

這裏是一個jsfiddle演示的方法。