在看到 dagre-d3 相当复杂的TCP 状态图示例后,我认为它能够解析类似复杂度的图。在下图中,显然不是这种情况。如果两个标记的节点被交换,所有的交叉都将被解决。
另一个有趣的事情是,解决图形的好坏似乎取决于我设置边的顺序。
以下代码
g.setEdge("148570019_1100", "148570020_1100", { label: "" });
g.setEdge("148570019_1100", "148570021_1100", { label: "" });
g.setEdge("148570019_1100", "148570010_1100", { label: "" });
没有给出与此相同的结果:
g.setEdge("148570019_1100", "148570010_1100", { label: "" });
g.setEdge("148570019_1100", "148570020_1100", { label: "" });
g.setEdge("148570019_1100", "148570021_1100", { label: "" });
看这两个例子:
正如建议的那样,我尝试使用cola.js,这就是同一张图的样子:
如您所见,colajs 在减少交叉点方面做得更好,但布局不像 dagre 那样结构化和清晰。我对 colajs 使用以下设置:
cola.d3adaptor()
.avoidOverlaps(true)
.convergenceThreshold(1e-3)
.symmetricDiffLinkLengths(20)
.flowLayout('x', 150)
.size([width, height])
.nodes(nodes)
.links(edges)
.constraints(constraints)
.jaccardLinkLengths(300);
是否可以配置 colajs 使其看起来更有条理,类似于 dagre?dagre 是否根本无法解决这样的问题,或者是否有可能以某种方式对其进行配置?