流程图的自动间距
因此，我正在开发一个项目，最终将使用 Flickr api 生成一种流程图。 您将提供一个种子标签，程序将使用该种子标签来查找具有通用标签的其他相关 Flickr 图片...
我已启动并运行所有后端内容，但我对格式感到困惑。 这是我希望它看起来像什么的屏幕...
这是我的问题。 有没有一个好的方法来接近每个分支的间距？ 这意味着，我希望有一个功能，我可以简单地创建一个新节点（或“分支”）并指定我希望它附加到哪个现有节点。 这一切都很好，但我需要能够自动、智能地将新节点放置在页面上，这样它就不会与任何现有的线条或节点重叠。 我想这更像是一个一般性的编程问题，就好像我知道我可以对其进行编码的过程一样，但对于那些感兴趣的人，我会使用 Javascript/HTML/CSS 进行样式设置，也许还会使用一些 PHP 来进行 Flickr 调用。
请随时提出任何问题以澄清我的胡言乱语。
So I'm working on a project that will, in the end, generate a kind of flow chart using the Flickr api. You will supply a seed tag, and the program will use that seed tag to find other related Flickr pictures that have common tags...
I have all of the back end stuff up and running but I'm stumped on the formatting. Here is a screenie of what I would like it to look like...
Here's my question. Is there a good way of approaching the spacing of each branch? By this is mean, I would like to have a function where I could simply create a new node (or "branch") and specify which existing node I would like it to attach to. This is all good and fine, but I need to be able to automatically and intelligently place the new node on the page so it doesn't overlap any existing lines or nodes. I guess this is more of a general programming question as if I knew the process I could code it, but for those who are interested I am doing this in Javascript/HTML/CSS for the styling and maybe some PHP for the Flickr calls.
Feel free to ask any questions to clarify my rambling.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以在节点之间使用弹簧模型。 每个节点都对其他每个节点施加排斥力。 允许所有节点相互推动一定次数，你就会想出一个合理的解决方案。 您需要有一些限制，以确保节点不会飞入太空，并且不会在几个相似的状态之间振荡。
用 Javascript/PHP 实现它作为读者的练习。
另一种方法是使用图形布局程序，例如 GraphViz。
You could use a spring model between the nodes. Each node exerts a repelling force against every other node. Allow all the nodes to push against each other a certain number of times and you'll come up with a reasonable solution. You'll want to have a couple limits to make sure nodes don't go flying off into space and that you don't oscillate between a couple similar states.
Implementing it in Javascript/PHP is left as an exercise for the reader.
An alternative is to use a graph layout program such as GraphViz.
我期待看到您的项目的结果。 我同意 scompt 关于使用 graphviz 的观点。
I look forward to seeing the results of your project. I agree with scompt about using graphviz.