Graph d3.js中的网络多路径正交图

我们希望使用d3绘制一个网络路由图，该图具有固定的起始节点和结束节点，但它们之间的路径不同，可能共享一些节点，例如：

我阅读了来自的评论，并成功创建了一个简单的图表，如：

但当我向图形中添加更多节点时，它会变得随机（刷新后不再是静态的），不再是正交的：

所以我的问题是：

• 是否可以使用d3.js绘制接近所需的内容 图表
• 还是有一种算法我应该在我的工作中使用 图形实现
在这里查看我的演示
其主要思想是基于树建立连接

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

---

解决了我们的问题。它正是我们所需要的。
我使用Dagre-d3构建了一个示例，它将Dagre（由@frank建议）与d3集成在一起

//显示选项
变量选项={
兰克迪尔：“LR”
};
//创建输入图形
var g=new dagreD3.graphlib.Graph（）
.setGraph（选项）
.setDefaultEdgeLabel（函数（）{
返回{}；
});
//设置节点
var n_节点=8；
对于（var i=0；i
.node{
指针事件：无；
}
.节点圆{
中风：暗射线；
填充物：浅灰色；
}
(一)边路{
笔画：黑色；
}

添加新节点时，似乎正在初始化力。这是否使用强制导向布局？如果是这样，则需要删除对force.start（）或force.restart（）的任何引用，以防止其返回到强制导向状态。是：我使用的是强制导向布局。你的意思是要删除强制导向布局吗？我怎样才能确保节点在没有斥力的情况下不会碰撞呢？但是节点systemD/E/F/G堆叠在一起。Dagre解决了我们的问题-它很好地对齐了节点。很好！我认为很难对任何复杂的网络图进行自动对齐。有什么特别的算法吗？