javascript 带有布局算法的基于 Canvas/SVG 的基于 Web 的树形图的库？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6337841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Library for Canvas/SVG web-based tree graphs with layout algorithm?
提问by bcoughlan
I'm looking for a library that can draw interactive (i.e. clickable nodes) tree graphs.
我正在寻找一个可以绘制交互式（即可点击节点）树形图的库。
Something like this but with text in the node boxes (i.e. the nodes would be of variable width and height).
类似这样的东西，但在节点框中带有文本（即节点的宽度和高度可变）。
Canviz doesn't have a stable release, and from what I can tell ProtoVis can't do text nodes and can only do single-parent nodes with tree layouts. Anyone aware of any libraries to do this in a browser?
Canviz 没有稳定版本，据我所知 ProtoVis 不能做文本节点，只能做带有树布局的单父节点。任何人都知道在浏览器中执行此操作的任何库？
采纳答案by PicoCreator
A basic tree digram tutorial (you may expand this to get what you want) http://www.codeproject.com/KB/scripting/graphic_javascript_tree.aspx
一个基本的树图教程（你可以扩展它以获得你想要的） http://www.codeproject.com/KB/scripting/graphic_javascript_tree.aspx
These are additional resources you may want to take a look at =)
这些是您可能想查看的其他资源 =)
http://www.graphviz.org/Theory.phphttp://directory.google.com/Top/Science/Math/Combinatorics/Software/Graph_Drawing/
http://www.graphviz.org/Theory.php http://directory.google.com/Top/Science/Math/Combinatorics/Software/Graph_Drawing/
Really hope to see this out in javascript in the future, i too have quite a fair bit of usage for such classes =P
真的希望将来能在 javascript 中看到这一点，我对此类类也有相当多的使用 =P
回答by maxkfranz
You may be interested in Cytoscape.js, an open-source JS graph visualisation and analysis library. It has built-in gestures, support for touch devices, and a rich API that you can use to integrate it into your webapp.
你可能对 Cytoscape.js 感兴趣，这是一个开源的 JS 图形可视化和分析库。它具有内置手势、对触摸设备的支持以及可用于将其集成到 Web 应用程序中的丰富 API。
Cytoscape.js has a built-in breadthfirstlayout for trees and DAGs, and this layout is very space efficient.
Cytoscape.js 具有breadthfirst用于树和 DAG的内置布局，这种布局非常节省空间。
There is also the cytoscape-dagreextension for Cytoscape.js, which allows for using the excellent Dagre tree/DAG layout algorithm: https://github.com/cytoscape/cytoscape.js-dagre
还有cytoscape-dagreCytoscape.js的扩展，它允许使用优秀的 Dagre 树/DAG 布局算法：https: //github.com/cytoscape/cytoscape.js-dagre
Dagre produces very aesthetic results.
Dagre 产生了非常美观的效果。
Disclaimer: I work on Cytoscape.js
免责声明：我在 Cytoscape.js 上工作
回答by Josh
回答by Sebastian
Since that picture in the original post is actually created by a product of the same product family, I would like to add that "yFiles for HTML"is available commercially, too, since 2012.
由于原始帖子中的那张图片实际上是由同一产品系列的产品创建的，我想补充一点，自 2012 年以来，“yFiles for HTML”也可商用。
The picture above has been generated by the Java variant of that library. The Javascript library variant supports all layout algorithms that the Java variant supports, with the same properties and customization capabilities. They are implemented in Javascript and do not require an active server component.
上图是由该库的 Java 变体生成的。Javascript 库变体支持 Java 变体支持的所有布局算法，具有相同的属性和自定义功能。它们是用 Javascript 实现的，不需要活动的服务器组件。
The library uses SVG as the rendering backend by default, but Canvas based renderings can be included, too. See this live demo browserfor an example that shows a similar graph (HTML5-capable browser required).
该库默认使用 SVG 作为渲染后端，但也可以包含基于 Canvas 的渲染。有关显示类似图形的示例，请参阅此实时演示浏览器（需要支持 HTML5 的浏览器）。
Disclaimer: I work for the company that creates that library, but on SO/SE I do not represent my employer.
免责声明：我为创建该库的公司工作，但在 SO/SE 上，我不代表我的雇主。
回答by Larry Symms
This question is pretty old and pretty high up in Google results so I thought I'd update it. GraphVis does exactly what you want in a desktop, java swing based app but this is not ideal. Their description is a hierarchical graph. I Googled that and came across dagre which is built upon d3. http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
这个问题已经很老了，而且在谷歌搜索结果中排名靠前，所以我想我会更新它。GraphVis 完全符合您在基于 Java Swing 的桌面应用程序中的要求，但这并不理想。它们的描述是一个层次图。我在谷歌上搜索并发现了基于 d3 的 dagre。 http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
JIT can be made to do it but it's very cumbersome and fragile.
JIT 可以做到这一点，但它非常麻烦和脆弱。
