JavaScript中的图形可视化库

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

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

很不错，但是对于较大的图形来说速度很慢，从2007年起就被放弃了

---

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

我刚刚整理了您可能需要的内容：

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

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

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

---

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

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

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

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

纯JavaScript库

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

• -具有移动支持的交互式图形分析和可视化，遵循jQuery约定。由国家卫生研究院资助，由（见）在几所大学和其他组织的帮助下开发

• -Jit，一种交互式多用途图形绘制和布局框架。请参见示例。由Twitter dataviz架构师于2010年建造

• 强大的多用途JS可视化库，Protovis的继承者。请参见中的示例和其他图形示例

• JS可视化库使用D3.JS与JS、Python、R和MATLAB绑定。请参见IPython中的nexworkx示例、人机交互示例和

• 用于绘制图形的轻量级但功能强大的库

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

• -一种力定向图布局算法

• John Resig的处理库的Javascript端口

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

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

• -David Durman的MPL许可开放源代码图表库。它可以用来创建静态图表或完全交互的图表工具和应用程序生成器。在支持SVG的浏览器中工作。核心包中不包括的布局算法

• 以前的商业HTML5图表库，现在在ApacheV2.0下可用。mxGraph是中使用的基本库

商业图书馆

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

• 商业图形绘制和布局库

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

• 商用多用途可视化库

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

废弃图书馆

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

• JS渲染器用于Graphviz图形。2013年9月

• 复杂的图形与良好的物理和眼睛糖果。2012年5月被遗弃。有几个叉子

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

• 客户端图形绘制应用程序

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

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

• 2007年代图形可视化脚本

• JavaScript的图形布局

非Javascript库

• 复杂的图形可视化语言
  • Graphviz已使用带有
• 漂亮而强大的基于Flash的图形绘制

• Python图形可视化

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

另外，我刚刚推出了一个基于SVG的超级简单（无依赖项，~125 LOC），它应该可以很好地用于现代浏览器中显示的小图形。

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

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

• 用于查询和筛选的选择器（

  cy.elements（“节点[weight>=50].someClass”）

  的功能与您预期的一样多）
• 链接（例如

  cy.nodes（）.unselect（）.trigger（“mycustomevent”）

  ）
• 类jQuery