JavaScript 中的图形可视化库

我刚刚整理了您可能正在寻找的内容：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库（涂鸦示例）以及一些代码，用于我在网络上找到的基于力的图形布局算法（一切都是开源的，MIT许可证）。如果您有任何意见或需要某个功能，我可能会实现它，只是问！

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

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

• DataVisualization.ch 已经评估了许多库，包括节点/图库。不幸的是，没有直接链接，所以你必须过滤“图形”：

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

纯 JavaScript 库

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

• Cytoscape.js - 交互式图形分析和可视化，支持移动，遵循jQuery约定。由NIH资助，由@maxkfranz开发（见下面的答案），并得到几所大学和其他组织的帮助。

• JavaScript InfoVis Toolkit - Jit，一个交互式的多用途图形绘制和布局框架。例如，请参阅双曲树。由Twitter数据可视化建筑师Nicolas Garcia Belmonte建造，并于2010年被Sencha收购。

• D3.js强大的多用途JS可视化库，Protovis的继承者。请参阅力定向图示例和库中的其他图形示例。

• 剧情JS 可视化库将 D3.js与 JS、Python、R 和 MATLAB 绑定结合使用。在这里查看IPython中的nexworkx示例，在此处查看人机交互示例和JS Embed 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 中使用的基础库。

商业图书馆

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

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

• 关键线商用 JS 网络可视化工具包

• 缩放图表商用多用途可视化库

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

废弃的图书馆

• Cytoscape Web嵌入式JS网络查看器（没有计划新功能;由Cytoscape接替.js）

• 坎维兹JS renderer for Graphviz graphs.2013年9月废弃。

• 乔木.js复杂的图形与漂亮的物理和眼睛糖果。2012年5月废弃。存在几个半维护的分叉。

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

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

• 普罗托维斯用于可视化的图形工具包 （JavaScript）。替换为 d3。

• 穆摩轮连接和关系的交互式 JS 表示 （2008）

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

• 达格雷JavaScript 的图形布局

非 Javascript 库

• Graphviz先进的图形可视化语言

  • Graphviz 已经使用 Emscripten 编译为 Javascript 在这里有一个在线互动演示 这里

• 耀斑美观而强大的基于Flash的图形绘制

• 节点框Python Graph Visualization

• Processing.js John Resig的Processing library的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