关于jquery：JavaScript中的图形可视化库


Graph visualization library in JavaScript

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

注：我不是在找图表库。

相关讨论

我把你可能要找的东西放在一起：http://www.graphdracula.net好的。

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

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

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

你也可以看看其他项目！下面是两个元比较：好的。

  • SocialCompare有大量的库列表，并且"节点/边缘图"行将过滤图形可视化的库。好的。

  • datavisualization.ch已经评估了许多库，包括节点/图形库。不幸的是，没有直接链接，所以您必须过滤"graph"：Selection DataVisualization.ch好的。

以下是类似项目的列表(有些项目已经在这里提到过)：好的。纯JavaScript库

  • vis.js支持多种类型的网络/边缘图，以及时间线和二维/三维图表。自动布局、自动聚类、弹性物理引擎、移动友好型、键盘导航、层次布局、动画等。麻省理工学院授权并由一家专门研究自组织网络的荷兰公司开发。好的。

  • Cytoscape.js-交互式图形分析和可视化，支持移动，遵循jquery约定。由美国国立卫生研究院资助，由@maxkfranz(见下文答案)在多所大学和其他组织的帮助下开发。好的。

  • Javascript Infovis工具包-JIT，一个交互式、多用途的图形绘制和布局框架。例如，请参见双曲线树。由Twitter Dataviz建筑师尼古拉斯·加西亚·贝尔蒙特建造，于2010年由Sencha收购。好的。

  • d3.js强大的多功能JS可视化库，Protovis的继承者。请参见强制导向图示例和图库中的其他图示例。好的。

  • Plotly的JS可视化库将d3.js与JS、python、r和matlab绑定一起使用。在这里可以看到ipython中的nexworkx示例、这里的人机交互示例以及JS嵌入API。好的。

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

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

  • 一种力导向图布局算法好的。

  • john resig处理库的.js javascript端口好的。

  • JS绘图-用直线连接拖放框。线条的最小自动布局。好的。

  • RaphaelJS的Graffle-通用多用途矢量绘图库的交互式图形示例。RaphaelJS不能自动布局节点；您需要另一个库来实现这一点。好的。

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

  • MXgraph以前是商业的HTML5图表库，现在在Apachev2.0下可用。MXgraph是draw.io中使用的基础库。好的。

商业图书馆

  • GOJS交互式图形绘制与布局库好的。

  • HTML商业图形绘制和布局库文件好的。

  • Keylines商业JS网络可视化工具包好的。

  • 缩放图表商业多用途可视化库好的。

  • 用于绘图和可视化的SyncFusion JavaScript图表商业图表库。好的。

废弃的图书馆

  • Cytoscape Web Embedded JS Network Viewer(没有计划新功能；由Cytoscape.js继承)好的。

  • 图形化图形的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已经使用emscripten编译成了javascript，这里有一个在线的交互式演示。

  • 基于flash的图形绘制好的。

  • nodebox python图形可视化好的。

好啊。

相关讨论

免责声明：I’m a cytoscape.js开发者协会

图书馆是一个HTML5的cytoscape.js图的可视化。这是复杂的是jQuery API和会议，包括

  • 选择器的查询和过滤(cy.elements("node[weight >= 50].someClass")不多，你会期望)
  • chaining(例如，cy.nodes().unselect().trigger("mycustomevent"))
  • jQuery的功能结合到一类事件
  • 元素的集合(如有)htmldomelements jQuery集合类)
  • extensibility(可以添加自定义的布局，用户界面、核心功能和&；收集，等等)
  • 和更多。

如果你认真思考建设一个图的应用，你应该考虑cytoscape.js AT最小二乘法。它的自由和开放源码：

http：／／js.cytoscape.org

相关讨论

我jsvis尼斯，但慢和更大的图，和被遗弃的。自从2007年。

prefuse是一套软件工具创建丰富的交互式数据visualizations在Java。眩光是一个ActionScript库的创建visualizations运行Adobe Flash播放器是被遗弃的，因为2012年。

相关讨论

在商业的情况下，严重的contestant当然是HTML的支持：

它提供了：

  • 轻松自定义数据导入大学(这似乎相当多的互动在线演示是"做手术什么的)
  • 用于创建和编辑的交互式用户的手势(图manipulating通湖完整编辑器)
  • a现代定制编程API for each一方面图书馆
  • 分组和嵌套的支持地方工作人员的互动，通过布局算法)
  • depend on a不支持集成到具体的UI工具包，但几乎任何现有的JavaScript工具包(湖"一体化"的演示)
  • 自动布局(各种款式样"hierarchic"、"有机"，"正交"，"树"、"圆"、"径向"，和更多)
  • 先进的自动边缘路由(路由与正交边缘和有机障碍回避)
  • 偏增量和布局(添加和删除元素或没有在所有的时间和我们的其他变化(图)
  • 分组和嵌套的支持地方工作人员的互动，通过布局算法)
  • 图的算法实现(路径分析)，中心性，网络流量，等)
  • 使用HTML + CSS和SVG技术样5帆布和现代JavaScript将和其他更多的属性和特征es5 es6(同一个原因，但不运行在IE 8和较低的版本)。
  • 使用A模块API可以被加载和使用loaders点播

这里是一个样本绘制，显示请求的特点：

Screenshot of a sample rendering created by the BPMN demo.

全面披露：我工作yworks计算器，但是i不代表我的雇主。

相关讨论

为guruz提到，有一些可爱的JIT /树的布局图，包括rgraph和超树visualizations很趣味。

所以，我只是简单的把上A超在GitHub基于SVG实现(dependencies)~ 125，LOC)，应该有足够的工作为小图显示在现代的浏览器。