網絡多路正交圖中d3.js

Question

我們想用D3繪製網絡行車路線圖已定開始和結束節點，但兩者之間可能會共享一些節點不同的路徑，例如：

我讀Configure fixed-layout static graph in d3.js意見，併成功創建了一個簡單的圖形，如：

但正如我增加更多的節點，以圖成爲隨機的（不刷新後靜態），而不是正交了：

所以我的問題是：

• 是否有可能使用d3.js吸引了接近所需 圖？
• 還是有一個算法，我應該在我的 圖實現？

Answer 1

Dagre解決了我們的問題。它完全符合我們的需求。

Answer 2

看到這裏我的演示。

http://jsfiddle.net/doraeimo/JEcdS/

主要的想法是讓基於一個樹狀結構連通。

//1)temporarily convert a connectivity to a tree   
    var tree = conv2tree(data); 

    //2)calculate for nodes' coords with <code>cluster.nodes(tree);</code> 
    var nodes = buildNodes(tree); 

    //3)append all the edges(links) of the connectivity 
    var links = buildLinks(data);