javascript-流程图的自动间距

因此,我正在进行一个项目,该项目最终将使用Flickr api生成一种流程图.您将提供一个种子标签,程序将使用该种子标签来查找其他具有常见标签的相关Flickr图片.

我已经完成了所有后端工作,但是我对格式感到困惑.这是我想要的样子的屏幕截图…

这是我的问题.是否有一种很好的方法来接近每个分支的间距？意思是说,我想拥有一个函数,可以简单地创建一个新节点(或“分支”)并指定我希望将其附加到哪个现有节点.一切都很好,但是我需要能够自动,智能地在页面上放置新节点,以使其不与任何现有的线或节点重叠.我想这更像是一个通用的编程问题,好像我知道我可以对其进行编码一样,但是对于那些有兴趣的人,我正在Javascript / HTML / CSS中进行样式设置,也许在PHP中用于Flickr调用.

随时提出任何问题以澄清我的言论.

解决方法:

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

留给读者练习是用Javascript / PHP实现它.

另一种选择是使用图形布局程序,例如GraphViz.

标签：logic,flickr,javascript
来源： https://codeday.me/bug/20191107/2003240.html