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

Question

我的团队需要使用HTML5画布或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 <9不兼容，并且比库(更少学习，更多思考)的级别更低(面向文档)。

JIT也是一个很好的库(它也嵌入了基于力的算法)，与IE < 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

我发现This是一个很有用的库。它被称为GoJS。希望这能有所帮助。