Ism*_*imi 7 javascript algorithm canvas graph d3.js
我的团队需要使用HTML5 Canvas或D3库(或其他更合适的建议,欢迎建议)在JavaScript中构建流程图生成器.该流程图将从JSON文档中定义的有向图生成.我的问题如下:我们可以使用哪种标准算法来促进流程图中形状的自动放置(图中的节点),以便最大限度地减少重叠连接的数量及其长度？
小智 6
您正在寻找的标准算法是强制导向图: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算法.
力导向算法对于这类问题并不是最佳的.我宁愿建议使用分层图形绘制(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.