我的团队需要使用 HTML5 Canvas 或 D3 库（或其他更合适的工具，欢迎提出建议）用 JavaScript 构建流程图生成器。流程图将从 JSON 文档中定义的有向图生成。我的问题如下：我们可以使用哪种标准算法来促进流程图中形状（图中的节点）的自动放置，以最大限度地减少重叠连接的数量及其长度？
问问题
7744 次
4 回答
7
您正在寻找的标准算法是力导向图：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 算法。
于 2012-08-28T08:59:50.193 回答
6
力导向算法对于这类问题并不是完全最优的。我宁愿建议使用分层图形绘图（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 。
于 2013-10-16T17:30:01.220 回答
2
这是我发现有用的库。它被称为 GoJS。希望这可以帮助。
于 2018-04-24T06:26:13.597 回答
0
JavaScript InfoVis Toolkit (JIT) 可能有一些适合您的工具：
于 2012-08-28T05:57:36.013 回答