JavaScript中的图形可视化库 [英] Graph visualization library in JavaScript

问题描述

我有一个表示有向图的数据结构，我想在HTML页面上动态呈现。这些图通常只是几个节点，也许在最上方有十个节点，所以我的猜测是，性能并不是很大的。理想情况下，我希望能够使用jQuery挂钩，以便用户可以通过拖动节点来手动调整布局。

注意：我不是寻找图表库。

解决方案

我刚刚把你想要的东西放在一起：

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

纯JavaScript库

• vis.js 支持多种类型的网络/边缘图，加上时间轴和2D / 3D图表。自动布局，自动聚类，弹性物理引擎，移动友好，键盘导航，层次布局，动画等。 MIT许可，并由一家专门从事自组织网络研究的荷兰公司开发。




• Cytoscape.js - 使用移动支持的交互式图形分析和可视化，遵循jQuery约定。通过NIH拨款资助，并由 @maxkfranz 开发（请参阅他的答案在下面）在几个大学和其他组织的帮助下。




• JavaScript InfoVis工具包 - Jit，一个交互式的多用途图形绘制和布局框架。请参阅双曲线树。由Twitter dataviz建筑师建立 Nicolas Garcia Belmonte 和 Sencha 在2010年。




• D3.js 强大的多用途JS可视化库，Protovis的后继者。请参阅强制导向图示例，以及图库。




• Plotly的 JS可视化库使用D3.js与JS，Python，R和MATLAB绑定。请参阅IPython中的nexworkx示例 here ，人际交往示例这里和 JS Embed API 。




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




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




• Springy - 一个强制导向图布局算法




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




• JS Graph It - 拖动用直线连接。线的最小自动布局。




• RaphaelJS的Graffle - 通用多用途矢量绘图库的交互图示例。 RaphaelJS不能自动布局节点;您将需要另一个图书馆。




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




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

商业图书馆

• GoJS 互动图形绘图和布局库




• y文件的HTML 商业图形绘图和布局库




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




• ZoomCharts 商业多功能可视化库

被遗弃的图书馆

• Cytoscape Web 可嵌入的JS网络浏览器（没有新的功能计划，Cytoscape.js成功）




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




• arbor.js 精美的图形与漂亮的物理和眼睛糖果。 2012年5月被放弃。几个半维护的福克斯存在。




• jssvggraph 最简单的力量定向图布局算法实现为使用SVG对象的JavaScript库。放弃于2012年。




• jsdot 客户端图形绘图应用程序。 于2011年被放弃。




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




• Moo Wheel < a>连接和关系的Interactive JS表示（2008）




• JSViz 2007年代图形可视化脚本




• dagre JavaScript的图形布局

非Javascript库

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

  
  
  
  
  
  • Graphviz已使用Emscripten 这里，在线互动演示此处
  
  



• Flare 美丽强大的闪光灯基于图的图形




• NodeBox Python图形可视化

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

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屋！