JavaScript 中的图形可视化库

StackOverflow https://stackoverflow.com/questions/7034

题

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

笔记：我不是在寻找图表库。

有帮助吗？

解决方案

我刚刚整理了您可能正在寻找的内容： 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 许可证）。如果您有任何意见或需要某个功能，我可以实现它，尽管问！

您可能还想看看其他项目！以下是两个元比较：

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

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

以下是类似项目的列表（有些项目已经在这里提到过）：

纯 JavaScript 库

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

  • Cytoscape.js - 具有移动支持的交互式图形分析和可视化，遵循 jQuery 约定。由 NIH 拨款资助并由 @maxkfranz （看 他的回答如下）在几所大学和其他组织的帮助下。

  • JavaScript InfoVis 工具包 - Jit，一个交互式、多用途的图形绘制和布局框架。例如，参见 双曲树. 。由 Twitter dataviz 架构师构建 尼古拉斯·加西亚·贝尔蒙特 和 森查购买 在2010年。

  • D3.js 强大的多用途JS可视化库，Protovis的继承者。请参阅 力导向图 示例以及其他图表示例 画廊.

  • 情节的 JS 可视化库使用 D3.js 与 JS、Python、R 和 MATLAB 绑定。查看 IPython 中的 nexworkx 示例 这里, ，人机交互示例 这里, ， 和 JS 嵌入 API.

  • 西格玛.js 轻量级但功能强大的图形绘制库

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

  • 有弹性 - 力导向图布局算法

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

  • JS 图形它 - 通过直线连接的拖放框。线条的最小自动布局。

  • RaphaelJS 的 Graffle - 通用多用途矢量绘图库的交互式图形示例。RaphaelJS 无法自动布局节点；为此你需要另一个库。

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

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

商业图书馆

废弃的图书馆

  • 细胞景观网 可嵌入的 JS 网络查看器（没有计划新功能；由 Cytoscape.js 继承）

  • 坎维兹 JS 渲染器 对于 Graphviz 图。 弃 2013 年 9 月。

  • arbor.js 复杂的图形与良好的物理效果和养眼的效果。2012年5月被废弃。一些 半维护 分叉存在。

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

  • jsdot 客户端图形绘制应用程序。 2011年废弃.

  • 普罗托维斯 可视化图形工具包 (JavaScript)。替换为 d3。

  • 哞转轮 连接和关系的交互式 JS 表示 (2008)

  • JSViz 2007年时代的图形可视化脚本

  • 达格雷 JavaScript 的图形布局

非 Javascript 库

其他提示

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

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

  • 用于查询和过滤的选择器（cy.elements("node[weight >= 50].someClass") 正如您所期望的那样），
  • 链接（例如 cy.nodes().unselect().trigger("mycustomevent")),
  • 用于绑定事件的类似 jQuery 的函数，
  • 元素作为集合（就像 jQuery 有 HTMLDomElements 集合），
  • 可扩展性（可以添加自定义布局、UI、核心和集合功能等），
  • 和更多。

如果您正在考虑构建一个带有图形的严肃的 Web 应用程序，您至少应该考虑 Cytoscape.js。它是免费且开源的：

http://js.cytoscape.org

可见光系统 非常好，但是对于较大的图来说速度很慢，并且自 2007 年以来已被放弃。

预引信 是一组用于用 Java 创建丰富的交互式数据可视化的软件工具。 耀斑 是一个 ActionScript 库，用于创建在 Adob​​e Flash Player 中运行的可视化效果，自 2012 年以来已被废弃。

在商业场景中，严肃的竞争者肯定是 yHTML 文件:

它提供：

  • 简单的 进口 自定义数据（这个交互式在线演示 似乎几乎完全符合OP的要求）
  • 通过用户手势创建和操作图表的交互式编辑（请参阅完整的 编辑)
  • 巨大 编程接口 用于定制库的各个方面
  • 支持 分组 和 筑巢 （既可以交互，也可以通过布局算法）
  • 不依赖于特定的 UI 工具包，但支持 一体化 几乎可以嵌入到任何现有的 Javascript 工具包中（请参阅 “集成”演示)
  • 自动布局（各种样式，如“分层”、“有机”、“正交”、“树”、“圆形”、“径向”等）
  • 自动复杂的边缘布线（正交和有机边缘布线，具有避障功能）
  • 增量和部分布局（添加和删除元素，并且仅轻微或根本不改变图表的其余部分）
  • 支持分组和嵌套（交互式以及通过布局算法）
  • 的实施 图分析算法 （路径、中心性、网络流量等）
  • 使用 HTML 5 技术，如 SVG+CSS 和 Canvas 以及现代 Javascript，利用属性和其他更多 ES5 和 ES6 功能（但出于同样的原因，不能在 IE 版本 8 及更低版本中运行）。
  • 使用模块化 API，可以使用 UMD 加载器按需加载

下面是一个示例渲染，显示了大多数请求的功能：

Screenshot of a sample rendering created by the BPMN demo.

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

正如古鲁兹所提到的， 准时生产 有几个可爱的图形/树布局，包括非常吸引人的 RGraph 和 HyperTree 可视化。

另外，我刚刚发布了一个超级简单的基于 SVG 的 github上的实现 （无依赖项，~125 LOC）对于现代浏览器中显示的小图形来说应该足够好。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top