jquery cytoscape.js教程 - JavaScript中的图形可视化库




graph layout (5)

正如古鲁兹所说, JIT有几个可爱的图形/树形布局,其中包括颇具吸引力的RGraph和HyperTree可视化。

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

我有一个表示有向图的数据结构,并且我想在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已经评估了许多库,包括节点/图形库。 很遗憾,没有直接链接,因此您必须过滤“图表”:

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

纯粹的JavaScript库

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

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

  • JavaScript InfoVis工具包 - Jit,一个交互式,多用途的图形和布局框架。 例如参见双曲树 。 由Twitter的dataviz架构师尼古拉斯加西亚贝尔蒙特构建,并于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 - 一种强制导向的图形布局算法

  • 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中使用的基础库。

商业图书馆

被遗弃的图书馆

  • 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互动JS代表连接和关系(2008)

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

  • dagre JavaScript的图形布局

非Javascript库


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

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


在商业场景中,肯定的严重竞争者是用于HTML的yFiles

它提供:

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

这是一个示例渲染,显示了大部分请求的功能:

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


闭包很难解释,因为它们被用来使某些行为工作,每个人都直观地期望工作。 我发现解释它们的最佳方式(以及学习它们的方式)是想象没有它们的情况:

    var bind = function(x) {
        return function(y) { return x + y; };
    }
    
    var plus5 = bind(5);
    console.log(plus5(3));

如果JavaScript 知道闭包会发生什么? 只需用它的方法体替换最后一行中的调用(基本上是函数调用的函数),你得到:

console.log(x + 3);

现在, x的定义在哪里? 我们没有在当前范围内定义它。 唯一的解决方案是让plus5 携带其范围(或者更确切地说,其父节点的范围)。 这样, x是明确定义的,它绑定到值5。







javascript jquery data-structures graph-layout