JavaScript中的图形可视化库

本文翻译自：Graph visualization library in JavaScript

I have a data structure that represents a directed graph, and I want to render that dynamically on an HTML page. 我有一个表示有向图的数据结构，我想在HTML页面上动态呈现它。 These graphs will usually be just a few nodes, maybe ten at the very upper end, so my guess is that performance isn't going to be a big deal. 这些图通常只是几个节点，可能只有十个节点，所以我的猜测是性能不会是一个大问题。 Ideally, I'd like to be able to hook it in with jQuery so that users can tweak the layout manually by dragging the nodes around. 理想情况下，我希望能够使用jQuery将其挂钩，以便用户可以通过拖动节点来手动调整布局。

Note: I'm not looking for a charting library. 注意：我不是在寻找图表库。

---

#1楼

参考：https://stackoom.com/question/1pS/JavaScript中的图形可视化库

---

#2楼

Disclaimer: I'm a developer of Cytoscape.js 免责声明：我是Cytoscape.js的开发人员

Cytoscape.js is a HTML5 graph visualisation library. Cytoscape.js是一个HTML5图形可视化库。 The API is sophisticated and follows jQuery conventions, including API很复杂，遵循jQuery约定，包括

• selectors for querying and filtering ( cy.elements("node[weight >= 50].someClass") does much as you would expect), 用于查询和过滤的选择器（ cy.elements("node[weight >= 50].someClass")与你期望的一样多，
• chaining (eg cy.nodes().unselect().trigger("mycustomevent") ), 链接（例如cy.nodes().unselect().trigger("mycustomevent") ），
• jQuery-like functions for binding to events, 用于绑定事件的类jQuery函数，
• elements as collections (like jQuery has collections of HTMLDomElements), 元素作为集合（如jQuery具有HTMLDomElements的集合），
• extensibility (can add custom layouts, UI, core & collection functions, and so on), 可扩展性（可以添加自定义布局，UI，核心和集合功能等），
• and more. 和更多。

If you're thinking about building a serious webapp with graphs, you should at least consider Cytoscape.js. 如果你正在考虑使用图表构建一个严肃的webapp，你至少应该考虑使用Cytoscape.js。 It's free and open-source: 它是免费和开源的：

http://js.cytoscape.org http://js.cytoscape.org

---

#3楼

JsVIS was pretty nice, but slow with larger graphs, and has been abandoned since 2007. JsVIS相当不错，但是随着图表的增加而变慢，并且自2007年以来就被放弃了。

prefuse is a set of software tools for creating rich interactive data visualizations in Java. prefuse是一组用于在Java中创建丰富的交互式数据可视化的软件工具。 flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player, abandoned since 2012. flare是一个ActionScript库，用于创建自2012年以来放弃的Adobe Flash Player中运行的可视化。

---

#4楼

In a commercial scenario, a serious contestant for sure is yFiles for HTML : 在商业场景中，一个严肃的参赛者肯定是yFiles for HTML ：

It offers: 它提供：

• Easy import of custom data ( this interactive online demo seems to pretty much do exactly what the OP was looking for) 轻松导入自定义数据（ 这个交互式在线演示似乎几乎完全符合OP的要求）
• Interactive editing for creating and manipulating the diagrams through user gestures (see the complete editor ) 通过用户手势创建和操作图表的交互式编辑（请参阅完整的编辑器 ）
• A huge programming API for customizing each and every aspect of the library 一个巨大的编程API，用于自定义库的每个方面
• Support for grouping and nesting (both interactive, as well as through the layout algorithms) 支持分组和嵌套 （交互式，以及布局算法）
• Does not depend on a specfic UI toolkit but supports integration into almost any existing Javascript toolkit (see the "integration" demos ) 不依赖于特定的UI工具包，但支持集成到几乎任何现有的Javascript工具包中（请参阅“集成”演示 ）
• Automatic layout (various styles, like "hierarchic", "organic", "orthogonal", "tree", "circular", "radial", and more) 自动布局（各种风格，如“层次”，“有机”，“正交”，“树”，“圆形”，“径向”等）
• Automatic sophisticated edge routing (orthogonal and organic edge routing with obstacle avoidance) 自动复杂的边缘路由（正交和有机边缘路由，避障）
• Incremental and partial layout (adding and removing elements and only slightly or not at all changing the rest of the diagram) 增量和部分布局（添加和删除元素，仅略微或根本不更改图的其余部分）
• Support for grouping and nesting (both interactive, as well as through the layout algorithms) 支持分组和嵌套（交互式，以及布局算法）
• Implementations of graph analysis algorithms (paths, centralities, network flows, etc.) 图分析算法的实现 （路径，中心，网络流等）
• Uses HTML 5 technologies like SVG+CSS and Canvas and modern Javascript leveraging properties and other more ES5 and ES6 features (but for the same reason will not run in IE versions 8 and lower). 使用SVG + CSS和Canvas等HTML 5技术和现代Javascript利用属性以及其他更多ES5和ES6功能（但出于同样的原因，不会在IE 8及更低版本中运行）。
• Uses a modular API that can be loaded on-demand using UMD loaders 使用可以使用UMD加载器按需加载的模块化API

Here is a sample rendering that shows most of the requested features: 下面是一个示例渲染，显示了大多数请求的功能：

Full disclosure: I work for yWorks, but on Stackoverflow I do not represent my employer. 完全披露：我为yWorks工作，但在Stackoverflow上，我不代表我的雇主。

---

#5楼

I've just put together what you may be looking for: http://www.graphdracula.net 我刚刚把你想要的东西放在一起： http ： //www.graphdracula.net

It's JavaScript with directed graph layouting, SVG and you can even drag the nodes around. 它是带有有向图形布局的JavaScript，SVG，你甚至可以拖动节点。 Still needs some tweaking, but is totally usable. 仍需要一些调整，但完全可用。 You create nodes and edges easily with JavaScript code like this: 您可以使用以下JavaScript代码轻松创建节点和边：

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

I used the previously mentioned Raphael JS library (the graffle example) plus some code for a force based graph layout algorithm I found on the net (everything open source, MIT license). 我使用了前面提到的Raphael JS库（graffle示例）以及我在网上找到的基于强制的图形布局算法的一些代码（所有开源，MIT许可证）。 If you have any remarks or need a certain feature, I may implement it, just ask! 如果您有任何评论或需要某个功能，我可以实现它，只要问！

---

You may want to have a look at other projects, too! 您可能也想看看其他项目！ Below are two meta-comparisons: 以下是两个元比较：

• SocialCompare has an extensive list of libraries, and the "Node / edge graph" line will filter for graph visualization ones. SocialCompare具有广泛的库列表，“节点/边缘图”行将过滤图形可视化库。

• DataVisualization.ch has evaluated many libraries, including node/graph ones. DataVisualization.ch已经评估了许多库，包括节点/图形库。 Unfortunately there's no direct link so you'll have to filter for "graph": 很遗憾，没有直接链接，因此您必须过滤“图表”：

Here's a list of similar projects (some have been already mentioned here): 这是一个类似项目的列表（这里已经提到了一些）：

Pure JavaScript Libraries 纯JavaScript库

• vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts. vis.js支持多种类型的网络/边缘图，加上时间轴和2D / 3D图表。 Auto-layout, auto-clustering, springy physics engine, mobile-friendly, keyboard navigation, hierarchical layout, animation etc. MIT licensed and developed by a Dutch firm specializing in research on self-organizing networks. 自动布局，自动聚类，弹性物理引擎，移动友好，键盘导航，分层布局，动画等。 麻省理工学院由一家专门研究自组织网络的荷兰公司授权和开发。

• Cytoscape.js - interactive graph analysis and visualization with mobile support, following jQuery conventions. Cytoscape.js - 遵循jQuery约定的移动支持的交互式图形分析和可视化。 Funded via NIH grants and developed by by @maxkfranz (see his answer below ) with help from several universities and other organizations. 通过NIH拨款资助，由@maxkfranz （见下面的答案 ）在几所大学和其他组织的帮助下开发。

• The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework. JavaScript InfoVis Toolkit - Jit，一个交互式，多用途的图形绘制和布局框架。 See for example the Hyperbolic Tree . 参见例如双曲树 。 Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010. 由Twitter dataviz建筑师Nicolas Garcia Belmonte建造并于2010年被Sencha收购 。

• D3.js Powerful multi-purpose JS visualization library, the successor of Protovis. D3.js功能强大的多用途JS可视化库，是Protovis的继承者。 See the force-directed graph example, and other graph examples in the gallery . 请参阅强制定向图示例以及库中的其他图形示例。

• Plotly's JS visualization library uses D3.js with JS, Python, R, and MATLAB bindings. Plotly的 JS可视化库使用带有JS，Python，R和MATLAB绑定的D3.js。 See a nexworkx example in IPython here , human interaction example here , and JS Embed API . 见IPython的一个nexworkx例子在这里 ，人际交往例如这里 ，和JS API嵌入 。

• sigma.js Lightweight but powerful library for drawing graphs sigma.js用于绘制图形的轻量级但功能强大的库

• jsPlumb jQuery plug-in for creating interactive connected graphs jsPlumb jQuery插件，用于创建交互式连接图

• Springy - a force-directed graph layout algorithm Springy - 力导向图布局算法

• Processing.js Javascript port of the Processing library by John Resig Processing.js John Resig的Processing库的Javascript端口

• JS Graph It - drag'n'drop boxes connected by straight lines. JS Graph It - 通过直线连接拖动框。 Minimal auto-layout of the lines. 最小的线条自动布局。

• RaphaelJS's Graffle - interactive graph example of a generic multi-purpose vector drawing library. RaphaelJS的Graffle - 通用多功能矢量绘图库的交互式图形示例。 RaphaelJS can't layout nodes automatically; RaphaelJS无法自动布局节点; you'll need another library for that. 你需要另一个图书馆。

• JointJS Core - David Durman's MPL-licensed open source diagramming library. JointJS Core - David Durman的MPL许可开源图表库。 It can be used to create either static diagrams or fully interactive diagramming tools and application builders. 它可用于创建静态图表或完全交互式图表工具和应用程序构建器。 Works in browsers supporting SVG. 适用于支持SVG的浏览器。 Layout algorithms not-included in the core package 布局算法未包含在核心包中

• mxGraph Previously commercial HTML 5 diagramming library, now available under Apache v2.0. mxGraph以前是商业HTML 5图表库，现在可以在Apache v2.0下使用。 mxGraph is the base library used in draw.io . mxGraph是在所用的碱库draw.io 。

Commercial libraries 商业图书馆

• GoJS Interactive graph drawing and layout library GoJS交互式图形绘制和布局库

• yFiles for HTML Commercial graph drawing and layout library yFiles for HTML商业图形绘制和布局库

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

• ZoomCharts Commercial multi-purpose visualization library ZoomCharts商业多功能可视化库

• Syncfusion JavaScript Diagram Commercial diagram library for drawing and visualization. Syncfusion JavaScript Diagram用于绘图和可视化的商业图库。

Abandoned libraries 被遗弃的图书馆

• Cytoscape Web Embeddable JS Network viewer (no new features planned; succeeded by Cytoscape.js) Cytoscape Web嵌入式JS网络查看器（没有计划新功能; Cytoscape.js成功）

• Canviz JS renderer for Graphviz graphs. 用于Graphviz图形的Canviz JS 渲染器 。 Abandoned in Sep 2013. 被遗弃在2013年9月。

• arbor.js Sophisticated graphing with nice physics and eye-candy. arbor.js复杂的图形，具有良好的物理和眼睛糖果。 Abandoned in May 2012. Several semi-maintained forks exist. 被遗弃在2012年5月。存在几种半维护叉。

• jssvggraph "The simplest possible force directed graph layout algorithm implemented as a Javascript library that uses SVG objects". jssvggraph “最简单的力导向图布局算法，实现为使用SVG对象的Javascript库”。 Abandoned in 2012. 在2012年被遗弃。

• jsdot Client side graph drawing application. jsdot客户端图绘制应用程序。 Abandoned in 2011 . 2011年被遗弃 。

• Protovis Graphical Toolkit for Visualization (JavaScript). 用于可视化的Protovis图形工具包（JavaScript）。 Replaced by d3. 由d3取代。

• Moo Wheel Interactive JS representation for connections and relations (2008) 用于连接和关系的Moo Wheel Interactive JS表示（2008）

• JSViz 2007-era graph visualization script JSViz 2007年代图形可视化脚本

• dagre Graph layout for JavaScript dagre JavaScript的图形布局

Non-Javascript Libraries 非Javascript库

• Graphviz Sophisticated graph visualization language Graphviz复杂的图形可视化语言

  • Graphviz has been compiled to Javascript using Emscripten here with an online interactive demo here Graphviz已使用Emscripten编译为Javascript， 此处提供在线交互式演示

• Flare Beautiful and powerful Flash based graph drawing Flare美丽而强大的基于Flash的图形绘制

• NodeBox Python Graph Visualization NodeBox Python图形可视化

---

#6楼

As guruz mentioned, the JIT has several lovely graph/tree layouts, including quite appealing RGraph and HyperTree visualizations. 正如guruz所提到的， JIT有几个可爱的图形/树形布局，包括非常吸引人的RGraph和HyperTree可视化。

Also, I've just put up a super simple SVG-based implementation at github (no dependencies, ~125 LOC) that should work well enough for small graphs displayed in modern browsers. 另外，我刚刚在github上设置了一个超级简单的基于SVG的实现 （没有依赖关系，~125 LOC），这对于现代浏览器中显示的小图表应该足够好。