JavaScript中的图形可视化库

 

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

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

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

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

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

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

你也可以看看其他项目！ 以下是两个比较：

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

  • DataVisualization.ch已经评估了许多库，包括节点/图形库。 很遗憾，没有直接链接，因此您必须过滤“图表”： 选择DataVisualization.ch

    • 这里列出了一些类似的项目（一些已经在这里提到）：

    纯粹的JavaScript库

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

  • Cytoscape.js - 使用移动支持的交互式图形分析和可视化，遵循jQuery约定。 通过美国国立卫生研究院拨款资助，由@maxkfranz开发（请参阅下面的答案），并得到多所大学和其他组织的帮助。

  • JavaScript InfoVis工具包 - Jit，一个交互式，多用途的图形和布局框架。 例如参见双曲树。 由Twitter的dataviz架构师尼古拉斯加西亚贝尔蒙特构建，并于2010年被Sencha收购。

  • D3.js强大的多用途JS可视化库，Protovis的继任者。 查看图库中的强制导向图形示例和其他图形示例。

  • Plotly的JS可视化库使用带JS，Python，R和MATLAB绑定的D3.js。 在这里查看IPython中的nexworkx示例，这里是人机交互示例，以及JS Embed API。

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

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

  • Springy - 一种强制导向的图形布局算法

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

  • JS Graph It - 拖放通过直线连接的盒子。 线条的最小自动布局。

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

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

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

    • 商业图书馆

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

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

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

  • ZoomCharts商业多用途可视化库

    • 被遗弃的图书馆

  • Cytoscape Web嵌入JS网络查看器（没有计划新功能;由Cytoscape.js成功）

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

  • arbor.js复杂的图形与良好的物理和眼睛糖果。 在2012年5月放弃。存在几种半维护叉。

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

  • jsdot客户端图形绘制应用程序。 在2011年被遗弃。

  • Protovis可视化图形工具包（JavaScript）。 由d3取代。

  • Moo Wheel互动JS代表连接和关系（2008）

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

  • dagre JavaScript的图形布局

    • 非Javascript库

  • Graphviz先进的图形可视化语言

  • Graphviz已经在这里使用Emscripten编译成Javascript，并且在线交互式演示在这里

  • Flare美丽而强大的基于Flash的图形绘制

  • NodeBox Python Graph可视化

    • 免责声明：我是Cytoscape.js的开发者

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

  • 用于查询和过滤的选择器（ cy.elements("node[weight >= 50].someClass")效果与您预期的相当），
  • 链接（例如cy.nodes().unselect().trigger("mycustomevent") ），
  • 类似jQuery的函数绑定事件，
  • 元素作为集合（比如jQuery拥有HTMLDomElements集合），
  • 可扩展性（可以添加自定义布局，UI，核心和集合功能等），
  • 和更多。

    • 如果你正在考虑用图形构建一个严肃的Web应用程序，至少应该考虑Cytoscape.js。 它免费且开源：

    http://js.cytoscape.org

    JsVIS相当不错，但图表较大，速度较慢，自2007年以来已被放弃。

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

    链接地址: http://www.djcxy.com/p/63789.html

    上一篇: Graph visualization library in JavaScript

    下一篇: Animate rotation of an image in Android