JavaScript 中的图形可视化库

Question

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

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

Answer 1

在商业场景中，一个严肃的竞争者肯定是 yFiles for HTML：

它提供：

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

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

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

Answer 2

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

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

Answer 3

免责声明：我是 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

Answer 4

我刚刚整理了您可能需要的内容： http://www.graphdracula.net

它是 JavaScript通过定向图形布局、SVG，您甚至可以拖动节点。 仍然需要一些调整，但完全可用。 您可以使用这样的 JavaScript 代码轻松创建节点和边：

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

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

---

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

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

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

以下是类似项目的列表（其中一些项目已在此处提及）：

纯 JavaScript 库

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

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

• JavaScript InfoVis 工具包 - Jit，一个交互式、多用途图形绘制和布局框架。 例如，请参阅 双曲树 。 由 Twitter dataviz 架构师 Nicolas Garcia Belmonte 和 2010 年由 Sencha 购买。

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

• Plotly 的 JS 可视化库使用 D3.js 与 JS、Python、R 和 MATLAB 绑定。 请参阅 IPython 中的 nexworkx 示例此处，人机交互示例此处，以及 JS 嵌入 API。

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

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

• Springy - 一种力导向的图形布局算法

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

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

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

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

商业库

• GoJS交互式图形绘制和布局库

• yFiles for HTML 商业图形绘制和布局库

• KeyLines商业JS网络可视化工具包

• ZoomCharts 商业多用途可视化库

• Syncfusion JavaScript 图 用于绘图和可视化的商业图表库。

废弃的库

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

• Canviz JS 渲染器，用于 Graphviz 图表。 已于 2013 年 9 月废弃。

• arbor.js 复杂的图形，具有良好的物理效果和养眼效果。 于 2012 年 5 月被废弃。存在多个半维护分叉。

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

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

• Protovis 用于可视化的图形工具包 (JavaScript)。 已替换为 d3。

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

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

• dagre JavaScript 图形布局

非 Javascript 库

• 的图形布局

  Graphviz 复杂的图形可视化语言

  • Graphviz 已使用 Emscripten 此处 编译为 Javascript，其中 在线互动演示

• Flare 美丽而强大的基于 Flash 的图形绘制

• NodeBox Python 图形可视化

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