具有布局算法的Canvas / SVG基于Web的树图库？

Question

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

这样的东西，但在节点框中有文字（即节点的宽度和高度可变）。

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

Answer 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

Answer 2

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

http://js.cytoscape.org

Cytoscape.js为树和DAG提供了内置的breadthfirst布局，这种布局非常节省空间。

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

达格尔产生非常美观的效果。

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

Answer 3

你看过JIT了吗？我用他们的径向图做了一些工作，这很简单。

Answer 4

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

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

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

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

Answer 5

这个问题在Google搜索结果中非常陈旧且相当高，所以我想我会更新它。 GraphVis在桌面，基于Java swing的应用程序中完全符合您的要求，但这并不理想。他们的描述是一个分层图。我用Google搜索，并遇到了建立在d3上的dagre。 http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

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