为“好看”的图形布局安排节点边

Question

我遇到了NodeTrix论文中提出的以下图形布局：

可见的大块是节点本身（一种子图的复合节点）。

我看到边缘是某种曲线，它们之间似乎没有太多相交。此外，节点和边之间不会相交。顺便说一句，Paper 不谈论它。

我希望实现这种可视化。我有以下疑问：

第一季度。这是一些特定的算法来安排节点-边以使图看起来不错，如本文所示？一般还有其他算法吗？

第二季度。上面显示的弯曲边缘是否也有一些特殊的算法？

如果有人能直观地弄清楚上图中的确切算法，那就太好了，但一些通用的类似算法也应该这样做。

Answer 1

一种算法是Force-directed graph drawing。它将产生与发布的图片非常不同的输出，但它非常受欢迎，可能会给您a place 以启动looking。

说实话，我怀疑显示的图表是手动布局的。

编辑：回复评论

在示例中，所有节点都是方形框，边缘开始/结束与框的边对角线。解决这个问题的方法可能是

1. 使用力方向放置盒子（或者可能是它的一些定制版本，力取决于盒子的大小）
2. 想象一个“引导边缘”直接穿过盒子的中心
3. 计算引导边缘与框相交的位置，并将其用作真实绘制边缘的起点/终点。
4. 使真正的边从对角线开始，并使用bezier curves 绘制曲线。

您可能希望将其表示为具有bezier cures built in, e.g., svg 的某种矢量格式。