JavaScript中的图形可视化库

时间：2008-08-10 04:07:52

标签： javascript jquery data-structures graph-layout

我有一个表示有向图的数据结构，我想在HTML页面上动态呈现它。这些图通常只是几个节点，可能只有十个节点，所以我的猜测是性能不会是一个大问题。理想情况下，我希望能够使用jQuery将其挂钩，以便用户可以通过拖动周围的节点来手动调整布局。

注意：我不是在寻找图表库。

5 个答案:

答案 0 :(得分：878)

我刚刚把你想要的东西放在一起：http://www.graphdracula.net

这是带有有向图布局，SVG的JavaScript，您甚至可以拖动节点。仍需要一些调整，但完全可用。您可以使用以下JavaScript代码轻松创建节点和边：

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

我使用了前面提到的Raphael JS库（graffle示例）以及我在网上找到的基于强制的图形布局算法的一些代码（所有开源，MIT许可证）。如果您有任何评论或需要某个功能，我可以实现它，只需要询问！

您可能也希望了解其他项目！以下是两个元比较：

  • SocialCompare有一个广泛的库列表，“节点/边缘图”行将过滤图形可视化库。

  • DataVisualization.ch已经评估了许多库，包括节点/图形库。遗憾的是，没有直接链接，因此您必须过滤“图表”：Selection DataVisualization.ch

这是类似项目的列表（这里已经提到了一些）：

纯JavaScript库

  • vis.js支持多种类型的网络/边缘图，以及时间轴和2D / 3D图表。自动布局，自动聚类，弹性物理引擎，移动友好，键盘导航，分层布局，动画等MIT licensed，由一家专门研究自组织网络的荷兰公司开发。

    < / LI>

  • Cytoscape.js - 遵循jQuery约定的移动支持的交互式图形分析和可视化。通过NIH拨款资助，由@maxkfranz（见his answer below）在几所大学和其他组织的帮助下开发。

  • The JavaScript InfoVis Toolkit - Jit，一个交互式，多用途的图形绘制和布局框架。例如，参见Hyperbolic Tree。由Twitter dataviz架构师Nicolas Garcia Belmonte和bought by Sencha于2010年建立。

  • D3.js功能强大的多功能JS可视化库，是Protovis的继承者。请参阅force-directed graph示例以及gallery。

    • 中的其他图表示例

  • Plotly's JS可视化库将D3.js与JS，Python，R和MATLAB绑定结合使用。请参阅IPython here中的nexworkx示例，人工交互示例here和JS Embed API。

  • sigma.js用于绘制图表的轻量级但功能强大的库

  • jsPlumb jQuery插件，用于创建交互式连接图

  • Springy - 力导向图布局算法

  • Processing.js John Resig处理库的Javascript端口

  • JS Graph It - 用直线连接的拖动框。行的最小自动布局。

  • RaphaelJS's Graffle - 通用多功能矢量绘图库的交互式图形示例。 RaphaelJS无法自动布局节点;你需要另一个图书馆。

  • JointJS Core - David Durman的MPL许可开源图表库。它可用于创建静态图表或完全交互式图表工具和应用程序构建器。适用于支持SVG的浏览器。布局算法未包含在核心包中

  • mxGraph以前是商业HTML 5图表库，现在可在Apache v2.0下使用。 mxGraph是draw.io中使用的基础库。

商业图书馆

被遗弃的图书馆

  • Cytoscape Web嵌入式JS网络查看器（未计划新功能;由Cytoscape.js继承）

    • Graphviz图的

  • Canviz JS 渲染器。 Abandoned于2013年9月。

  • arbor.js复杂的图形，物理美观，眼花缭乱。被遗弃在2012年5月。存在多个semi-maintained叉子。

  • jssvggraph“最简单的力导向图布局算法实现为使用SVG对象的Javascript库”。被遗弃在2012年。

  • jsdot客户端图形绘制应用程序。 Abandoned in 2011

  • Protovis可视化图形工具包（JavaScript）。由d3取代。

  • Moo Wheel连接和关系的交互式JS表示（2008）

  • JSViz 2007年图形可视化脚本

  • dagre JavaScript的图表布局

非Javascript库

答案 1 :(得分：44)

免责声明：我是Cytoscape.js的开发者

Cytoscape.js是一个HTML5图形可视化库。 API很复杂，遵循jQuery约定，包括

  • 用于查询和过滤的选择器（cy.elements("node[weight >= 50].someClass")的功能与您预期的相同），
  • 链接（例如cy.nodes().unselect().trigger("mycustomevent")），
  • 用于绑定事件的类jQuery函数，
  • 元素作为集合（比如jQuery包含HTMLDomElements的集合），
  • 可扩展性（可以添加自定义布局，UI，核心和收集功能等），
  • 等。

如果你正在考虑使用图表构建一个严肃的webapp，你至少应该考虑使用Cytoscape.js。它是免费的，开源的：

http://js.cytoscape.org

答案 2 :(得分：35)

JsVIS非常好，但是图表越来越慢，自2007年以来就被放弃了。

prefuse是一组用于在Java中创建丰富的交互式数据可视化的软件工具。 flare是一个ActionScript库，用于创建自2012年以来放弃的Adobe Flash Player中运行的可视化。

答案 3 :(得分：9)

在商业场景中，一位认真的选手肯定是yFiles for HTML：

它提供：

  • 轻松导入自定义数据（this interactive online demo似乎与OP正在寻找的几乎相同）
  • 通过用户手势创建和操作图表的交互式编辑（请参阅完整的editor）
  • 用于自定义库的每个方面的巨大programming API
  • 支持分组和嵌套（交互式，以及布局算法）
  • 不依赖于特定的UI工具包，而是支持集成到几乎所有现有的Javascript工具包中（参见"integration" demos）
  • 自动布局（各种风格，如“层次”，“有机”，“正交”，“树”，“圆形”，“径向”等）
  • 自动复杂的边缘路由（避障的正交和有机边缘路由）
  • 增量和部分布局（添加和删除元素，仅略微或根本不更改图表的其余部分）
  • 支持分组和嵌套（交互式，以及布局算法）
  • graph analysis algorithms的实现（路径，中心，网络流等）
  • 使用SVG + CSS和Canvas等HTML 5技术和现代Javascript利用属性以及其他更多ES5和ES6功能（但出于同样的原因，不会在IE 8及更低版本中运行）。
  • 使用可以使用UMD加载器按需加载的模块化API

以下示例渲染显示了大多数请求的功能：

Screenshot of a sample rendering created by the BPMN demo.

完全披露：我为yWorks工作，但在Stackoverflow上，我不代表我的雇主。

答案 4 :(得分：7)

正如guruz所提到的，JIT有几个可爱的图形/树形布局，包括非常吸引人的RGraph和HyperTree可视化。

另外，我刚刚提出了一个超级简单的基于SVG的implementation at github（没有依赖关系，~12 LOC），这对于现代浏览器中显示的小图表应该足够好。

相关问题
最新问题