JavaScript图形布局引擎

Question

JavaScript图形布局引擎

12

我正在寻找一个能够进行图形布局的Javascript库/引擎（当我说布局时，我指的是将顶点逻辑地放置在合适的位置上）。我处理的图都是m元树。M通常不超过5或6，但在某些情况下可能会更大。

我现在有一个使用的工具，Graphviz的node程序，它完美地运行。问题是，在运行Web应用程序时，每次想要布局时都必须向服务器发送请求。最好的情况是，我希望有一个用JavaScript编写的东西，可以快速在客户端上运行。它只需要提供布局信息（相对位置等），我不需要它绘制到画布上或使用SVG等任何东西，我只关心布局。

像jQuery或RaphaelJS这样的库使用对我来说也没问题。我会使用它。我只是想找一些能加快进程的东西。

此外，如果我能找到一个描述布局算法的好方法，我也会考虑自己写一个。但我真的不想花太多时间。我已经有一个可以工作的版本，所以将其放在客户端上只是额外的奖励，而不是必要条件。

- GJK

我无法回答该问题，因为它已经关闭了...但您可能想要查看elkjs，用于布局部分。它比dagre更完整，并且与绘图库集成良好。同时，还可以查看选项列表。 - Gyum Fox

4个回答

8

请看D3(数据驱动文档)

http://d3js.org/

他们有一些美丽的图表布局。

- ColinE

绝对是一个非常好的选择。我尝试了一下，感到非常惊艳。这可能是我最终会使用的东西，但我会再等一会儿，看看有没有其他人有建议。 - GJK

3

在商业场景中，yFiles for HTML 库值得一看。虽然它也带有自己的可视化和编辑功能，但这些布局算法也可以独立使用，在撰写本文时，如果您正在寻找纯Javascript库，则很可能是最灵活和复杂的布局算法。当然，今天也有一些技术可以将任何库（例如GraphViz库）编译成 Javascript "blobs"，但它们并不提供真正的API，更像是浏览器中的控制台应用程序。

有许多demos在线演示展示了yFiles中的布局可以做什么。该实现提供了高级和可配置版本的力导向算法、分层（Sugiyama风格）、正交、树形、圆形和纯边缘路由算法。此概述显示了不同的可用模块，并且它们可以独立于查看器和编辑器部分使用。

完全透明披露：我是 yFiles 的创建公司的员工，但在 SO 上我并不代表我的雇主。

- Sebastian

请问您知道许可证的大致定价吗？ - John

1

@John：https://www.yworks.com/products/yfiles-for-html/pricing - Sebastian

2

http://sigmajs.org/ 是一个专门用于图表可视化的JS库，它使用Canvas而不是SVG。

- Seb

Sigma.js 的问题在于，你必须自己完成布局... - echox

不用担心，ForceAtlas2布局是可用的，你可以编写自己的布局。我已经为几个布局完成了这项工作。真正的问题是在Web浏览器上运行布局比使用编译语言慢得多。 - Seb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Glen · Accepted Answer

请查看dagre https://github.com/dagrejs/dagre，它现在使用D3并使用Graphviz的（Sugiyama）布局。