javascript - sigma - vis.js




JavaScript中的图形可视化库 (4)

JSViz相当不错,但是随着较大的图形速度变慢,自2007年以来已被放弃。

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

我有一个表示有向图的数据结构,我想在HTML页面上动态呈现它。 这些图通常只是几个节点,在最高端可能只有十个节点,因此我猜测性能并不重要。 理想情况下,我希望能够将其与jQuery挂钩,以便用户可以通过拖动节点来手动调整布局。

注意:我不是在寻找图表库。


免责声明:我是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


我已经汇总了您可能要查找的内容: http : //www.graphdracula.net

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

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

我使用了前面提到的Raphael JS库(涂鸦示例)以及一些代码,这些代码用于在网上找到的基于力的图形布局算法(所有开源程序,MIT许可证)。 如果您有任何意见或需要某些功能,我可以实施,只问一下!

您可能还想看看其他项目! 以下是两个元比较:

  • SocialCompare有大量的库列表,“节点/边线图”行将过滤图的可视化。

  • DataVisualization.ch已评估了许多库,包括节点/图形库。 不幸的是,没有直接链接,因此您必须过滤“图形”:

这是类似项目的列表(这里已经提到了一些项目):

纯JavaScript库

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

  • Cytoscape.js-遵循jQuery约定,具有移动支持的交互式图形分析和可视化。 由NIH资助,由@maxkfranz开发(请参见下面的答案 ),并得到了几所大学和其他组织的帮助。

  • JavaScript InfoVis Toolkit -Jit,一个交互式的多用途图形绘制和布局框架。 参见例如双曲线树 。 由Twitter dataviz建筑师Nicolas Garcia Belmonte建造,并于2010年被Sencha收购

  • D3.js强大的多功能JS可视化库,Protovis的后继者。 请参见力导向图示例,以及gallery中的其他图示例。

  • Plotly的 JS可视化库使用具有JS,Python,R和MATLAB绑定的D3.js。 请参阅here IPython中的nexworkx示例, here人机交互示例以及JS Embed API

  • sigma.js轻巧但功能强大的图形库

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

  • Springy力导向图布局算法

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

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

  • RaphaelJS的Graffle-通用多功能矢量绘图库的交互式图形示例。 RaphaelJS无法自动布置节点; 您将需要另一个库。

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

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

商业图书馆

废弃的图书馆

  • Cytoscape Web嵌入式JS网络查看器(未计划新功能;由Cytoscape.js继承)

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

  • arbor.js复杂的图形绘制,具有良好的物理特性和令人眼前一亮的糖果。 2012年5月废弃。存在几个semi-maintained货叉。

  • jssvggraph “实现为使用SVG对象的Javascript库的最简单的力导向图布局算法”。 2012年被遗弃。

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

  • Protovis用于可视化的图形工具包(JavaScript)。 替换为d3。

  • Moo Wheel用于连接和关系的Interactive JS表示形式(2008)

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

  • dagre JavaScript的图形布局

非JavaScript库


正如guruz所提到的, JIT具有几种可爱的图形/树布局,包括颇具吸引力的RGraph和HyperTree可视化。

另外,我刚刚jssvggraph提出了一个基于SVG的超级简单的jssvggraph (无依赖项,〜125 LOC),对于在现代浏览器中显示的小图来说应该足够好了。







graph-layout