自动放置流程图形状的算法

Question

我的团队需要使用HTML5 Canvas或D3库（或其他更合适的建议，欢迎建议）在JavaScript中构建流程图生成器。该流程图将从JSON文档中定义的有向图生成。我的问题如下：我们可以使用哪种标准算法来促进流程图中形状的自动放置（图中的节点），以便最大限度地减少重叠连接的数量及其长度？

Answer 1

您正在寻找的标准算法是力导向图：http://en.wikipedia.org/wiki/Force-based_algorithms_(graph_drawing) 如果你想要一个轻量级，浏览器不可知和高效的FD js库，请看一下arbor.js：https://github.com/samizdatco/arbor

恕我直言D3是你会发现的最强大的库（它嵌入基于力的算法），但它与IE不兼容＆lt; 9比文档更低（文档导向）（更少学习，更多思考）。

JIT也是一个很好的库（它也嵌入了基于力的算法），与IE不兼容＆lt; 9.它更像是infovis的Highcharts。更多要学习（助手，选项，参数），少考虑。

WireIt（YUI3）和JSplump（jQuery）是很好的管道库，但不包括FD算法。

Answer 2

力导向算法并不是这种问题的最佳选择。我宁愿建议使用分层图形绘制（http://en.wikipedia.org/wiki/Layered_graph_drawing）算法。这种算法的一个很好的JS实现是Dagre（https://github.com/cpettitt/dagre）。您还可以查看我关于自定义图表的自动布局和渲染的博文：http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html。

Answer 3

JavaScript InfoVis Toolkit（JIT）可能有一些适合您目的的工具：

http://thejit.org/

Answer 4

This是我觉得有用的库。它叫做GoJS。希望这会有所帮助。