JavaScript中的图形可视化库

我有一个表示有向图的数据结构，我想在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库（涂鸦示例）以及一些代码，这些代码用于在网上找到的基于力的图形布局算法（所有开源程序，MIT许可证）。如果您有任何意见或需要某些功能，我可以实施，只问一下！

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

• SocialCompare有大量的库列表，“节点/边线图”行将过滤图的可视化。

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

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

纯JavaScript库

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

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

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

• D3.js强大的多功能JS可视化库，Protovis的后继者。请参见力导向图示例，以及图库中的其他图示例。

• Plotly的 JS可视化库使用具有JS，Python，R和MATLAB绑定的D3.js。见IPython的一个nexworkx例子在这里，人际交往例如这里，和JS API嵌入。

• sigma.js轻巧但功能强大的图形库

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

• Springy-力导向图布局算法

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

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

• RaphaelJS的Graffle-通用多功能矢量绘图库的交互式图形示例。RaphaelJS无法自动布置节点；您将需要另一个库。

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

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

商业图书馆

• GoJS Interactive图形绘图和布局库

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

• KeyLines Commercial JS网络可视化工具包

• ZoomCharts商业多功能可视化库

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

废弃的图书馆

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

• 用于Graphviz图的Canviz JS 渲染器。2013年9月遗弃。

• arbor.js复杂的图形绘制，具有良好的物理特性和令人眼前一亮的糖果。2012年5月废弃。存在几个半维护的货叉。

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

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

• Protovis用于可视化的图形工具包（JavaScript）。替换为d3。

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

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

• dagre JavaScript的图形布局

非JavaScript库

• Graphviz复杂的图形可视化语言

  • Graphviz已在此处使用Emscripten编译为Javascript，并在此处进行了在线互动演示

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

• NodeBox Python图形可视化

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

JsVIS相当不错，但是随着较大的图形速度变慢，并且自2007年以来已被放弃。

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

在商业场景中，可以肯定的是，认真的竞争者是yFiles for HTML：

它提供：

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

这是显示大多数所需功能的示例渲染：

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

正如古鲁兹所说，准时制具有几种可爱的图形/树布局，包括颇具吸引力的RGraph和HyperTree可视化。

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