我刚刚整理了您可能正在寻找的内容：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 评估了许多库，包括节点/图形库。不幸的是，没有直接链接，因此您必须过滤“图形”：

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

纯 JavaScript 库

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

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

• JavaScript InfoVis Toolkit - Jit，一个交互式、多用途的图形绘制和布局框架。例如，参见双曲树。由 Twitter 数据可视化架构师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 - 一种力导向的图布局算法

• Processing.js处理库的 Javascript 端口，作者：John Resig

• 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 Diagram用于绘图和可视化的商业图表库。

废弃的图书馆

• Cytoscape Web Embeddable 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 时代的图形可视化脚本

• JavaScript 的dagre图形布局

非 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 库，用于创建在 Adob​​e Flash Player 中运行的可视化效果，自 2012 年以来已被废弃。

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

它提供：

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

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

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

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

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