具有布局算法的 Canvas/SVG 基于 Web 的树形图库？ [关闭]答案

【问题标题】：Library for Canvas/SVG web-based tree graphs with layout algorithm? [closed]具有布局算法的 Canvas/SVG 基于 Web 的树形图库？ [关闭]
【发布时间】：2011-09-14 08:03:17
【问题描述】：

我正在寻找一个可以绘制交互式（即可点击节点）树形图的库。

类似的东西，但在节点框中有文本（即节点的宽度和高度是可变的）。

Canviz 没有稳定的版本，据我所知，ProtoVis 不能做文本节点，只能做树形布局的单父节点。有人知道任何库可以在浏览器中执行此操作吗？

【问题讨论】：

我搜索了类似的解决方案，但找不到任何解决方案。我认为寻找其他语言的类似库是可行的方法。
在此期间您有没有自己做一些工作？我有同样的问题
@Pascalius 怕不是，老板决定选择桌面解决方案，所以使用 JGraph（它有一个 Javascript 对应物，但许可证费用为 5000 欧元）。

标签： javascript graph canvas svg

【解决方案1】：

一个基本的树形图教程（你可以扩展它以获得你想要的东西） http://www.codeproject.com/KB/scripting/graphic_javascript_tree.aspx

这些是您可能想要查看的其他资源 =)

http://www.graphviz.org/Theory.php http://directory.google.com/Top/Science/Math/Combinatorics/Software/Graph_Drawing/

真的希望以后能在javascript中看到这一点，我也有相当多的此类类的用法=P

【讨论】：

【解决方案2】：

您可能对 Cytoscape.js 感兴趣，这是一个开源 JS 图形可视化和分析库。它具有内置手势、对触摸设备的支持以及可用于将其集成到 Web 应用中的丰富 API。

http://js.cytoscape.org

Cytoscape.js 有一个用于树和 DAG 的内置 breadthfirst 布局，这种布局非常节省空间。

还有用于 Cytoscape.js 的 cytoscape-dagre 扩展，它允许使用出色的 Dagre 树/DAG 布局算法：https://github.com/cytoscape/cytoscape.js-dagre

Dagre 产生非常美观的效果。

免责声明：我在 Cytoscape.js 上工作

【讨论】：

【解决方案3】：

你看过JIT了吗？我对他们的径向图做了一些工作，这很容易。

【讨论】：

是的，看看 SpaceTree：不能动态调整节点大小以适应文本，也不能从树的不同深度的节点做弧。

【解决方案4】：

由于原帖中的图片实际上是由同一产品系列的产品创建的，我想补充一点，"yFiles for HTML" 自 2012 年起也可用于商业化。

上面的图片是由该库的 Java 变体生成的。 Javascript 库变体支持 Java 变体支持的所有布局算法，具有相同的属性和自定义功能。它们是用 Javascript 实现的，不需要活动的服务器组件。

该库默认使用 SVG 作为渲染后端，但也可以包含基于 Canvas 的渲染。请参阅 this live demo browser 获取显示类似图表的示例（需要支持 HTML5 的浏览器）。

免责声明：我为创建该库的公司工作，但在 SO/SE 上我不代表我的雇主。

【讨论】：

【解决方案5】：

这个问题已经很老了，而且在 Google 搜索结果中的排名很高，所以我想我会更新它。 GraphVis 在桌面、基于 java swing 的应用程序中完全符合您的要求，但这并不理想。他们的描述是一个层次图。我用谷歌搜索并发现了基于 d3 的 dagre。 http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

JIT 可以做到，但它非常麻烦和脆弱。

【讨论】：