流程图的自动间距

Question

所以我正在开发一个项目，最终将使用Flickr api生成一种流程图。您将提供种子标记，程序将使用该种子标记查找具有共同标记的其他相关Flickr图片...

我已经完成了所有后端操作，但我对格式化感到困惑。这是我想要的样子......

这是我的问题。是否有一种接近每个分支间距的好方法？这意味着，我希望有一个函数，我可以简单地创建一个新节点（或“分支”）并指定我希望它附加到哪个现有节点。这一切都很好，但我需要能够自动智能地将新节点放在页面上，这样它就不会与任何现有的行或节点重叠。我想这更像是一个普通的编程问题，好像我知道我可以编写代码的过程，但是对于那些感兴趣的人，我在Javascript / HTML / CSS中进行样式化，也许用于Flickr调用的PHP。

随意提出任何问题以澄清我的漫无边际。

Answer 1

您可以在节点之间使用弹簧模型。每个节点对每个其他节点施加排斥力。允许所有节点相互推挤一定次数，你会得到一个合理的解决方案。你需要有一些限制来确保节点不会飞到太空中，并且你不会在几个相似的状态之间振荡。

在Javascript / PHP中实现它是留给读者的练习。

另一种方法是使用图表布局程序，例如GraphViz。

Answer 2

我期待看到您项目的结果。我同意sctrt关于使用graphviz。