Javascript 图形布局引擎
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12271687/
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
Javascript Graph Layout Engine
提问by GJK
I'm looking for a Javascript library/engine that can do graph layouts. (And when I say layouts, I mean logically position vertices nicely.) The graphs I'm working with are all m-ary trees. M is usually no more than 5 or 6, but it can be greater in some cases.
我正在寻找可以进行图形布局的 Javascript 库/引擎。（当我说布局时，我的意思是在逻辑上很好地定位顶点。）我使用的图形都是 m 叉树。M 通常不超过 5 或 6，但在某些情况下可以更大。
I do have something that I use now, Graphviz's node program, and it works perfectly. The problem is, when running a web app, I have to send a request to the server every time I want a layout. Preferably, I would like something written in Javascript that can be quickly run on the client side. All it needs to do is provide layout information (relative positioning and whatnot). I don't need it to draw to a canvas or use SVG or anything, all I'm interested in is the layout.
我确实有我现在使用的东西，Graphviz 的节点程序，它运行良好。问题是，在运行 Web 应用程序时，每次需要布局时都必须向服务器发送请求。最好，我想要一些可以在客户端快速运行的用 Javascript 编写的东西。它需要做的就是提供布局信息（相对定位等）。我不需要它来绘制画布或使用 SVG 或任何东西，我感兴趣的只是布局。
Library use like jQuery or RaphaelJS is fine by me. I'll work with it. I'm just looking for something to speed things along a little.
像 jQuery 或 RaphaelJS 这样的库使用对我来说很好。我会处理它。我只是在寻找一些东西来加快速度。
Also, I'd consider writing my own if I could find a nice description of an algorithm to do the layouts. But I really don't want to spend too much time. I have something that works now, so getting it on the client side is just a bonus, not a necessity.
另外，如果我能找到一个很好的算法描述来进行布局，我会考虑自己写。但我真的不想花太多时间。我现在有一些可以工作的东西，所以在客户端获得它只是一种奖励，而不是必需品。
采纳答案by ColinE
Take a look at D3 (Data-Driven Documents)
看看 D3（数据驱动的文档）
They have some beautiful graph layouts.
他们有一些漂亮的图形布局。
回答by Glen
Check out dagre https://github.com/cpettitt/dagreit now uses D3 and does Graphviz's (Sugiyama) layout.
查看 dagre https://github.com/cpettitt/dagre它现在使用 D3 并执行 Graphviz 的（Sugiyama）布局。
回答by Seb
http://sigmajs.org/is a specialized js lib for graph visualization. It uses Canvas instead of SVG.
http://sigmajs.org/是一个专门用于图形可视化的 js 库。它使用 Canvas 而不是 SVG。
回答by Sebastian
In a commercial scenario, the yFiles for HTMLlibrary should be worth looking at. Although it also comes with its own visualization and editing capabilities, the layouts can also be used standalone and at the time of writing these are very likely the most flexible and complex layout algorithms you will find if you are looking for pure Javascript libraries. Of course there are techniques available today that will basically compile any library (e.g. the GraphViz library) into Javascript "blobs", but they do not provide a true API, they are more like console applications in the browser.
在商业场景中，yFiles for HTML库应该值得一看。虽然它也带有自己的可视化和编辑功能，但布局也可以独立使用，在撰写本文时，如果您正在寻找纯 Javascript 库，这些很可能是您会发现的最灵活和最复杂的布局算法。当然，今天有一些可用的技术基本上可以将任何库（例如 GraphViz 库）编译成Javascript“blob”，但它们不提供真正的 API，它们更像是浏览器中的控制台应用程序。
There are a number of demosavailable online that show what you can do with the layouts in yFiles. The implementation provides sophisticated and configurable versions of force directed algorithms, hierarchical (Sugiyama style), orthogonal, tree, circular and pure edge routing algorithms. This overviewshows the different available modules and that they can be used independently from the viewer and editor parts.
在线提供了许多演示，它们展示了您可以对 yFiles 中的布局进行哪些操作。该实现提供了力导向算法、分层（Sugiyama 风格）、正交、树、圆形和纯边缘路由算法的复杂和可配置版本。此概述显示了不同的可用模块，并且它们可以独立于查看器和编辑器部件使用。
Full disclosure: I work for the company that creates yFiles, but on SO I do not represent my employer.
完全披露：我为创建 yFiles 的公司工作，但在 SO 上我不代表我的雇主。
