流程图的自动间距

Question

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

我有所有的后端东西了起来，但我被困在格式。下面是我想它看起来像什么的screenie ...

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

随意问任何问题，以澄清我的散漫。

Answer 1

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

在Javascript/PHP中实现它作为读者的练习。

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

Answer 2

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