graph - d3.js 中的网络多路由正交图

Question

我们想用d3画一个网络路由图，起始节点和结束节点是固定的，但中间的路径不同，可能共享一些节点，例如:

我阅读了来自 Configure fixed-layout static graph in d3.js 的评论并成功创建了一个简单的图形，如:

但是当我向图中添加更多节点时，它变得随机(刷新后不是静态的)并且不再是正交的:

所以我的问题是:

• 是否可以使用 d3.js 来绘制接近所需的东西图形？
• 或者有没有我应该在我的工作中使用的算法图实现？

Answer 1

在这里看我的演示。

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);