如何重新分配图形元素以最大化可读性？

Question

我有一个由节点组成的图表。每个节点可以有多个父节点和/或子节点。我想显示该图和节点之间的连接。

但我不知道如何重新分配节点以最大限度地提高可读性。目前我面临以下问题：

• 节点连接相互交叉过多，尽管这是不必要的并且可以规避
• 节点之间的连接在视觉上太长了
• 一些连接具有相同的角度，因此它们重叠并成为一条线
• i 列和i-2 列之间的连接（以及更远的地方）有时会直接通过i-1 列中的元素

我也只能垂直移动节点，不能水平移动，因为列的数量是有限的。

为了让我自己更容易，我尝试将节点放置在类似网格的模式中。我已经设法按列对它们进行分组。但后来我不知何故需要遍历列并将它们与其他列进行比较以重新排列东西。我不知道从哪里开始。

UPD：我可能错了，但我觉得我的图形对齐问题在某种程度上与最短路径的典型图形问题有关。除了在我的情况下，应该同时计算多个路径，并且某些节点只能传递一次。

在下面的图片中，您可以看到我只是在纸上涂鸦（从左到右的方向显示了父子连接）。

Answer 1

这是图形布局和绘图问题。您可以采取以下两种方法之一

1. 使用已有的库：有许多可用的图形布局库，例如 GraphViz、Gephi、D3js 等。您可以直接使用他们的 API，也可以在上面找到构建的应用程序/工具其中。但是要获得最佳布局，您需要对布局系列进行猜测。例如分层图形布局（适用于密集但分层的图形，如流程图） 树布局（当图形实际上是树或森林时使用。树有很多变体），径向树布局（同样适用于树，但在极坐标系统中），强制定向布局（当您不知道哪种视觉结构最能代表数据时，这是一个很好的起点）。所有这些布局都将具有许多自定义参数，例如节点之间的间距、节点和边缘之间的间距、绘图的整体纵横比等。 GraphViz Gephi

2. 自己实现布局算法 可以在此处找到针对不同系列的图形绘制算法的详细介绍 Graph Drawing Handbook

如果您不想详细了解，这里是快速入门点

1. 对于图形，进行拓扑排序并按照拓扑顺序将节点放置在层中。它可以给你一个很好的起点，帮助你避免不必要的交叉。网格在这里可能是个好主意。但将节点按拓扑顺序放置在网格中。
2. 或者，为图形查找生成树，使用树布局绘制生成树，然后添加剩余边
3. 对于树：使用递归自底向上方法放置子树。对于径向树，做直线布局，然后转换到极坐标系
4. 对于未知的家庭：使用强制方法。定义两个节点之间的力（例如弹簧力），然后通过迭代找到平衡点。

图表的最佳自动可视化是一个非常有趣的领域，人们在这里尝试了许多机器学习技术。

Answer 2

你可以实现force directed drawing。或者你可以使用已经支持强制定向绘图的绘图库，例如 D3 的force directed layout。