JavaScript图形可视化库

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

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

492945 次浏览
小开

JsVIS非常好，但是对于更大的图形来说比较慢，并且在2007年被放弃了。

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

小开
最佳答案

我只是把你可能正在寻找的东西放在一起: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库(涂鸦示例)加上一些我在网上找到的基于力的图形布局算法的代码(一切都是开源的，MIT许可)。如果你有任何评论或需要某个功能，我可能会实现它，只是问!

你可能也想看看其他项目!下面是两个元比较:

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

  • < p > DataVisualization。Ch评估了许多库，包括节点/图库。不幸的是，没有直接链接，所以你必须过滤"graph":选择数据可视化。ch

下面是一些类似的项目(有些已经在这里提到过了):

纯JavaScript库

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

  • Cytoscape.js -交互式图形分析和可视化与移动支持，遵循jQuery惯例。由美国国立卫生研究院资助，由@maxkfranz(见他的回答如下)在几所大学和其他组织的帮助下开发。

  • JavaScript InfoVis工具包 - Jit，一个交互式，多用途的图形绘制和布局框架。例如，参见双曲线树。由Twitter数据可视化架构师尼古拉斯·加西亚·贝尔蒙特和Sencha购买在2010年构建。

  • 强大的多用途JS可视化库，Protovis的继承者。参见指定图示例，以及画廊中的其他图形示例。

  • 情节的 JS可视化库使用D3.js与JS, Python, R和MATLAB绑定。请参阅IPython 在这里中的nexworkx示例，人机交互示例在这里和JS嵌入API。

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

  • jsPlumb jQuery插件创建交互式连接图形

  • 有弹力的 -一个力向图布局算法

  • JS图形 -拖放由直线连接的盒子。最小的自动布局的行。

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

  • JointJS核心 - David Durman的mpls许可的开源图表库。它既可以用来创建静态图，也可以用来创建完全交互式的图工具和应用程序构建器。适用于支持SVG的浏览器。布局算法不包括在核心包

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

商业库

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

  • yFiles for HTML商业绘图和布局库

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

  • 商业多用途可视化库

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

废弃的库

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

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

  • 复杂的图形与良好的物理和养眼的糖果。2012年5月被遗弃。存在几个semi-maintained分叉。

  • jssvggraph "最简单的可能的力有向图形布局算法实现为一个Javascript库，使用SVG对象"2012年被遗弃。

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

  • Protovis可视化图形工具包(JavaScript)。用d3代替。

  • Moo轮交互式JS表示连接和关系(2008)

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

  • dagre JavaScript的图形布局

javascript库的

  • 复杂的图形可视化语言

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

  • Python图形可视化

  • Processing.js Processing库的Javascript端口

小开

正如guruz提到的，JIT有几个可爱的图/树布局，包括相当吸引人的RGraph和HyperTree可视化。

此外，我刚刚提出了一个超级简单的基于svg的在github实现(没有依赖关系，~125 LOC)，它应该足够好地用于现代浏览器中显示的小图形。

小开

免责声明:我是Cytoscape.js的开发人员

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 < a href = " http://js.cytoscape.org " > < / >

小开

在商业场景中，一个严肃的竞争者肯定是yFiles for HTML:

它提供了:

  • 自定义数据的简单进口 (这个互动在线演示似乎几乎完全做了OP正在寻找的事情)
  • 通过用户手势创建和操作图表的交互式编辑(参见完整的编辑器)
  • 一个巨大的编程API，用于自定义库的每个方面
  • 支持分组和嵌套(都是交互式的，也都是通过布局算法实现的)
  • 不依赖于特定的UI工具包，但几乎所有现有的Javascript工具包都支持集成(参见“集成”演示)
  • 自动布局(各种风格，如“层次”，“有机”，“正交”，“树”，“圆形”，“径向”，等等)
  • 自动复杂边缘路由(具有避障功能的正交有机边缘路由)
  • 增量式和局部布局(添加和删除元素，只稍微改变或根本不改变图的其余部分)
  • 支持分组和嵌套(交互的，以及通过布局算法)
  • 图分析算法的实现(路径、中心、网络流等)
  • 使用HTML 5技术，如SVG+CSS和Canvas和现代Javascript利用属性和其他更多的ES5和ES6特性(但出于同样的原因将不能在IE版本8及以下运行)。
  • 使用模块化API，可以使用UMD加载器按需加载

下面是一个示例渲染，显示了大部分请求的功能:

BPMN演示创建的示例渲染截图。

充分披露:我为yWorks工作，但在Stackoverflow上我不代表我的雇主。


提交答案