网络多路正交图中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);