JavaScript 中的图形可视化库 [英] Graph visualization library in JavaScript
问题描述
我有一个表示有向图的数据结构，我想在 HTML 页面上动态呈现它.这些图通常只有几个节点，最高端可能有 10 个，所以我的猜测是性能不会有什么大不了的.理想情况下，我希望能够将其与 jQuery 挂钩，以便用户可以通过拖动节点来手动调整布局.
注意:我不是在寻找图表库.
我刚刚整理了您可能需要的内容:
以下是类似项目的列表(这里已经提到了一些):
纯 JavaScript 库
vis.js 支持多种类型的网络/边图，以及时间线和 2D/3D图表.自动布局、自动聚类、弹性物理引擎、移动友好、键盘导航、分层布局、动画等. MIT 许可，由一家专门研究自组织网络的荷兰公司开发.
Cytoscape.js - 具有移动支持的交互式图形分析和可视化，遵循 jQuery 约定.由 NIH 资助，由 @maxkfranz 开发(参见 他在下面的回答) 在几所大学和其他组织的帮助下.
JavaScript InfoVis 工具包 - Jit，一种交互式、多用途的图形绘制和布局框架.例如，参见 双曲树.由 Twitter 数据可视化架构师 Nicolas Garcia Belmonte 和 2010 年被 Sencha 收购.
Plotly 的 JS 可视化库使用 D3.js 和 JS、Python、R 和 MATLAB 绑定.查看 IPython 中的 nexworkx 示例 此处，人机交互示例 这里 和 JS 嵌入 API.
sigma.js 轻量级但功能强大的绘图库
jsPlumb jQuery 插件，用于创建交互式连接图
Springy - 一种力导向的图布局算法
Processing.js John Resig 的 Processing 库的 Javascript 端口
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 嵌入式 JS 网络查看器(没有计划新功能；由 Cytoscape.js 接替)
Canviz 用于 Graphviz 图的 JS 渲染器.已于 2013 年 9 月放弃.
jssvggraph "最简单的强制有向图布局算法，作为 Javascript 库实现，使用SVG 对象".2012 年废弃.
Protovis 可视化 (JavaScript) 图形工具包.替换为 d3.
Moo Wheel 用于连接和关系的交互式 JS 表示(2008 年)
JSViz 2007 时代图形可视化脚本
dagre JavaScript 图形布局
非 Javascript 库
I have a data structure that represents a directed graph, and I want to render that dynamically on an HTML page. 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.
Note: I'm not looking for a charting library.
I've just put together what you may be looking for: http://www.graphdracula.net
It's JavaScript with directed graph layouting, SVG and you can even drag the nodes around. Still needs some tweaking, but is totally usable. You create nodes and edges easily with JavaScript code like this:
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). 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.
DataVisualization.ch has evaluated many libraries, including node/graph ones. 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
vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts. 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. Funded via NIH grants and developed by by @maxkfranz (see his answer below) with help from several universities and other organizations.
The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework. See for example the Hyperbolic Tree. Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010.
D3.js Powerful multi-purpose JS visualization library, the successor of 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. See a nexworkx example in IPython here, human interaction example here, and JS Embed API.
sigma.js Lightweight but powerful library for drawing graphs
jsPlumb jQuery plug-in for creating interactive connected graphs
Springy - a force-directed graph layout algorithm
Processing.js Javascript port of the Processing library by John Resig
JS Graph It - drag'n'drop boxes connected by straight lines. Minimal auto-layout of the lines.
RaphaelJS's Graffle - interactive graph example of a generic multi-purpose vector drawing library. RaphaelJS can't layout nodes automatically; you'll need another library for that.
JointJS Core - David Durman's MPL-licensed open source diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders. Works in browsers supporting SVG. Layout algorithms not-included in the core package
mxGraph Previously commercial HTML 5 diagramming library, now available under Apache v2.0. mxGraph is the base library used in draw.io.
Commercial libraries
GoJS Interactive graph drawing and layout library
yFiles for HTML Commercial graph drawing and layout library
KeyLines Commercial JS network visualization toolkit
ZoomCharts Commercial multi-purpose visualization library
Syncfusion JavaScript Diagram Commercial diagram library for drawing and visualization.
Abandoned libraries
Cytoscape Web Embeddable JS Network viewer (no new features planned; succeeded by Cytoscape.js)
Canviz JS renderer for Graphviz graphs. Abandoned in Sep 2013.
arbor.js Sophisticated graphing with nice physics and eye-candy. Abandoned in May 2012. Several semi-maintained forks exist.
jssvggraph "The simplest possible force directed graph layout algorithm implemented as a Javascript library that uses SVG objects". Abandoned in 2012.
jsdot Client side graph drawing application. Abandoned in 2011.
Protovis Graphical Toolkit for Visualization (JavaScript). Replaced by d3.
Moo Wheel Interactive JS representation for connections and relations (2008)
JSViz 2007-era graph visualization script
dagre Graph layout for JavaScript
Non-Javascript Libraries
Graphviz Sophisticated graph visualization language
- Graphviz has been compiled to Javascript using Emscripten here with an online interactive demo here
Flare Beautiful and powerful Flash based graph drawing
NodeBox Python Graph Visualization
这篇关于JavaScript 中的图形可视化库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
