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

Question

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

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

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

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

Q1。这是一些特定的算法来安排节点边缘，以便图形看起来很好，如本文所示？一般的任何其他算法？

Q2。上面所示的弯曲边缘是否有一些特殊的算法？

如果有人能够在视觉上找出上图中的确切算法，那将会很棒，但是一些类似的算法也应该这样做。

Answer 1

一种算法是Force-directed graph drawing。它会产生与发布图片截然不同的输出，但它非常受欢迎，可能会让您a place开始looking。

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

编辑：回复评论

在该示例中，所有节点都是方框，并且边缘开始/结束对齐框的边。一种方法可能是

1. 使用强制方向放置方框（或者可能是某些自定义版本，强制取决于方框的大小）
2. 想象一下＆＃34;引导边缘＆＃34;直接进入盒子的中心之间
3. 计算引导边与框相交的位置，并将其用作实际绘制边的起点/终点。
4. 使真正的边缘从两侧开始对角线，并使用bezier curves绘制曲线。

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