Cytoscape.js：用于可视化和分析的图论库

摘要

总结：Cytoscape.js是一个开源的基于JavaScript的图形库。它最常见的用例是作为可视化软件组件，因此可以用于在web浏览器中呈现交互式图形。它还可以以无头的方式使用，这对于服务器（如Node.js）上的图形操作很有用。

可用性和实施：Cytoscape.js是用JavaScript实现的。文档、下载和源代码可在http://js.cytoscape.org.

联系人： gary.bader@utoronto.ca

1引言

从细胞机制分析到疾病生物标记物识别，生物学中的网络信息在许多情况下继续发挥作用。此外，网络越来越成为一个应用程序平台，其具有使用标准技术（如HTML、CSS和JavaScript（JS））的复杂用户界面。Cytoscape.js提供了一个js应用程序编程接口（API），使软件开发人员能够将图形集成到其数据模型和web用户界面中。Cytoscape.js可用于多个领域，如生物网络或社交图。Cytoscape.js是基于Adobe Flash的Cytospace Web的现代替代品(洛佩斯等。, 2010).

2实施

Cytoscape.js实现为一个独立的js库。它没有硬性依赖；不需要浏览器插件或其他库。然而，它包含几个有用的库和环境的挂钩，包括CommonJS/Node.js、AMD/Require.js、jQuery、Bower、npm、spm和Meteor。这使得Cytoscape.js能够集成到各种基于js的软件系统中。

Cytoscape.js的架构允许它无头运行（即无图形用户界面）或作为可视化组件运行(图1)，使用HTML5画布作为其底层实现。这允许Cytoscape.js在客户端（即浏览器和服务器端）上运行，这是一个重要的考虑因素，因为js代码越来越多地与客户端和服务器共享。

为了提高易用性，该库与HTML+CSS+JS web模型共享了几个概念。Cytoscape.js中的样式是使用类似CSS的样式表指定的，与CSS共享尽可能多的语法。类似地，图元素类似于HTMLDOM元素，它们由样式表进行样式设置，并可通过JS核心API进行编程访问。

Cytoscape.js架构由核心和集合组成。核心是开发人员进入库的主要入口点。它表示图形，用于运行布局、更改视图以及对图形整体执行其他操作。核心功能可用于访问图形元素。每个函数都返回一个集合，即一组图形元素。集合有自己的API，可用于筛选、遍历、执行操作以及获取集合中元素的数据。一些核心函数将集合作为输入。

3特点

3.1功能集

Cytoscape.js功能包括但不限于以下内容：

图形类型：Cytoscape.js支持多种类型的图，包括传统图、有向图、无向图、多重图和超图（具有复合节点，但尚未具有超边）。

可变图：可以通过添加、删除或修改图形元素的状态来操作图形。这使得应用程序能够为用户提供高度交互式的图形。

图形遍历：提供了图形遍历函数，这些函数对于用户界面交互和编程图形分析都很有用。

图论算法包括几个著名的图论算法，如连通性搜索、最短路径、最小生成树、最小割、排序和中心性度量。

样式表：样式表用于指定元素的视觉样式。支持选择器和类，以便将元素状态映射到样式。类似于Cytoscape桌面应用程序(香农·P·。等。, 2003)提供了一个功能映射器语法，用于根据元素数据映射特定样式属性，例如从数字权重映射的节点颜色。样式表可以在运行时替换，从而更改图形的整体视觉样式。

鼠标和触摸设备的内置手势支持：默认的Cytoscape.js渲染器支持用户期望的开箱即用的触摸和鼠标手势。可以拖动节点。用户可以通过捏-缩放和拖动-平移等手势操作视口。

事件绑定：事件可以通过多种方式绑定。可以使用委托，以便新添加的元素触发绑定事件。绑定时可以添加和删除绑定，并且可以指定元素到触发事件的多重性（即，对于哪些元素以及触发处理程序的次数）。提供了几个更高级别的事件，以便抽象用户交互的类型，例如，“点击”可以与计算机鼠标和触摸设备上的手指按压一起使用。

动画：动画可用于增加图形中特定元素的显著性，并在对图形进行编程更改时为用户提供视觉连续性。

复合节点：作为传统图形模型的补充，复合节点是开发人员在另一个节点中嵌入节点的一种方式。复合节点用于表示生物复合物及其亚基等事物。

导入和导出：图形可以导出为图像（PNG或JPG），包括以高分辨率发布。Cytoscape.js支持通过JSON导入和导出图形，从而允许图形状态的完全序列化和反序列化。

布局：布局提供了一种在图形中自动定位节点的机制。或者，开发者可以指定预先确定的节点位置。默认布局包括null、random、preset、grid、circle、concentral、widthfirst、dagre、cose、cola、spread、arbor和springy。

可扩展性：Cytoscape.js为开发者提供了扩展其行为的机制。例如，用户界面小部件可以构建在库的顶部，其中有几个扩展，包括贡献的布局算法。布局、核心和集合函数以及渲染器可以作为扩展编写，以添加到库中，而无需直接修改。

3.2性能

Cytoscape.js可以轻松地在普通硬件上渲染数千个图形元素。渲染性能受使用的视觉样式、图形大小和web浏览器客户端的影响。通过使用更简单的样式，尤其是边缘样式，可以提高渲染性能。在线文档中详细介绍了提高真实和用户感知的大型图形交互性能的可选功能。

Cytoscape.js在渲染方面很节俭：只有在需要更新视图时才渲染新帧。因此，开发人员可以安全地使用API进行分析，而不必担心渲染带来的开销。在使用Cytoscape.js时，没有渲染开销。

3.3文件

Cytoscape.js是作为一个开源项目积极开发的，可以在http://js.cytoscape.org文档包括对API、可运行代码示例和演示的深入描述。

3.4应用示例

Cytoscape.js的使用示例包括Cytospace桌面应用程序ConsensusPathDB的“将网络导出为网页”功能(坎伯罗夫A等。, 2013)，InnateDB(布鲁尔K等。, 2013)、BioJS库组件(Corpas M，2014年)，的酿酒酵母基因组数据库（Costanzo MC等。，2013），RCyjs生物导体包(http://www.bioconductor.org/packages/release/bioc/html/RCyjs.html），即将发布的GeneMANIA(沃德·法利等。, 2010)，cyNetShare(https://idekerlab.github.io/cy-net-share/)，无损检测(网址：http://www.ndexbio.org/），爱思唯尔(http://www.elsevier.com/books-and-journals/content-innovation/cytoscape)和Cytoscape.js网站上链接的演示(http://js.cytoscape.org/).

3.5未来方向

我们打算添加新的视觉样式、扩展、图形分析API和布局，以及改进扩展生态系统和提高性能。我们鼓励用户社区反馈，以引出新的库功能。

致谢

Cytoscape.js是Cytoscape联盟的一部分，并得到国家网络生物学资源（NRNB）的支持。Cytoscape.js借鉴了Cytospace桌面应用程序的许多概念，这两个项目试图尽可能实现互操作。我们感谢许多贡献者在https://github.com/cytscape/cytoscape.js/graphs/contributors.

基金

这项工作得到了NRNB（美国国立卫生研究院国家研究资源中心拨款P41 GM103504）以及NIH拨款R01GM0743和U41HG006623的支持。

利益冲突：未声明。

工具书类

作者注释