25. Cytoscape.js 和 Cytoscape¶

25.1. 什么是 Cytoscape.js？¶

Cytoscape.js 是一个用于交互式网络可视化的 JavaScript 库。它是构建 Web 应用程序的基石，本身不是一个完整的 Web 应用程序。如果您有网络数据集并希望分享使用 Cytoscape 创建的可视化结果，您可以利用 Cytoscape.js 和此项新增的导出至 Cytoscape.js 功能来构建自己的网站。

示例¶

使用 Cytoscape 3.1.0 可视化的网络
导出到 Cytoscape.js 的相同网络（使用 Google Chrome 和 Cytoscape.js 2.0.3 渲染）

差异与共有概念¶

虽然 Cytoscape 和 Cytoscape.js 是两个完全独立的软件包，但它们共享一些高级概念。以下是两者之间的相似之处和不同之处的列表：

Cytoscape¶

用于网络可视化的桌面应用程序，使用 Java 编程语言编写
需要在台式机或笔记本电脑上运行
用户必须安装 Java 运行环境 (JRE)
用于大规模网络分析和可视化的高性能应用程序
可通过应用程序 (Apps) 扩展
使用样式 (Styles) 将数据映射到网络属性，例如节点颜色、边宽度、节点形状等。

Cytoscape.js¶

用于网络可视化的 JavaScript 库，不是一个完整的 Web 应用程序或移动应用程序
可在大多数现代 Web 浏览器上运行，包括平板电脑和智能手机
运行无需任何插件。现代 Web 浏览器是唯一的要求
需要编写代码来设置您的网站或 Web 应用程序
可通过扩展 (Extensions) 扩展
使用基于 CSS 的样式将数据映射到网络属性

从长远来看，Cytoscape 和 Cytoscape.js 将会更加融合。作为第一步，Cytoscape 现在支持读取和写入 Cytoscape.js 的网络/表格 JSON 文件。此外，Cytoscape 可以将样式转换为 Cytoscape.js 样式对象。

25.2. Cytoscape 与 Cytoscape.js 之间的数据交换¶

由于 Cytoscape.js 是一个 JavaScript 库，其基本数据交换格式是 JSON (JavaScript 对象表示法)。所有这些导入/导出功能都是标准 Cytoscape 用户界面的一部分，您可以像处理 SIF 等其他标准文件一样读取/写入 Cytoscape.js JSON 文件。

将网络和表格导出到 Cytoscape.js¶

Cytoscape.js 将网络数据（图）及其数据表存储在同一个对象中。Cytoscape 将这种复杂数据写为 JSON，即网络和数据表都会被导出为一个单一的 JSON 文件。您可以选择一个网络，并通过 文件 (File) → 导出 (Export) → 网络至文件… (Network to File…) 进行导出，并选择 Cytoscape.js JSON (*.cyjs) 作为文件类型。

Cytoscape 仅支持 Cytoscape.js 所支持的其中一种 JSON 格式，即：

{
    elements:{
        nodes:[],
        edges:[]
    }
}

SUID 将被用作 JSON 中节点和边的唯一标识符。有关此格式的更多信息，请访问 Cytoscape.js 网站。

关于数据兼容性的重要说明¶

Cytoscape 直接从数据表创建 JSON 文件，并尽可能从原始表中提取数据。然而，由于表列名将直接转换为 JavaScript 变量名，无效字符将被下划线 (_) 替换。

原始数据表列名
```
Gene Name
KEGG.pathway
```
上述名称将被替换为
```
Gene_Name
KEGG_pathway
```

当您计划将此功能用于数据往返（从 Cytoscape 到 Cytoscape.js，再回到 Cytoscape）时，需要特别小心。对于此类用例，我们强烈建议仅在表列名中使用 JavaScript 安全字符。仅使用字母数字字符和下划线 (_) 来命名列是最佳实践。（对于实际数据条目，允许所有字符。此限制仅适用于表列名。）

25.3. 将样式导出到 Cytoscape.js¶

Cytoscape 和 Cytoscape.js 共享一个称为样式 (Style) 的概念。这是一组从数据点到网络属性的映射。Cytoscape 可以将其样式导出为基于 CSS 的 Cytoscape.js JSON。

您可以从 文件 (File) → 导出 (Export) → 样式至文件… (Styles to File…) 将所有样式导出为一个 JSON 文件，并选择 Style for cytoscape.js (*.json) 作为格式。

局限性¶

Cytoscape.js 并不支持所有的 Cytoscape 网络属性。当您导出到 JSON 样式文件时，这些属性将被忽略或简化。

目前，以下视觉属性将不会被导出到 Cytoscape.js JSON：

自定义图形及其位置
边弯曲 (Edge Bends)
工具提示 (Tooltips)
节点标签宽度
节点边框线条类型
箭头颜色（它们始终与边的颜色相同）

Cytoscape.js 与 Cytoscape 的兼容性¶

Cytoscape 的网络渲染系统专为桌面使用而设计，而基于浏览器的渲染器则结合了 Web 技术（例如 cytoscape.js 和层叠样式表 CSS）。因此，大多数（但并非所有）网络在浏览器中的渲染效果与在 Cytoscape 中相同。Web 浏览器不支持的 Cytoscape 视觉样式将被忽略。完整的兼容性列表可在此处获取此处。

将 Cytoscape.js 数据导入 Cytoscape¶

Cytoscape.js 网络 JSON 文件可以通过标准 Cytoscape 文件菜单加载：文件 (File) → 导入 (Import) → 网络… (Network…)。文件和 URL 均受支持。

25.4. 使用 Cytoscape.js 构建您自己的 Web 应用程序¶

虽然 Cytoscape 可以将网络、表格和样式导出为 Cytoscape.js 兼容的 JSON，但用户必须编写一些 JavaScript 代码才能使用 Cytoscape.js 将数据文件可视化。使用 Cytoscape.js 进行 Web 应用程序开发的细节超出了本文档的范围。如果您需要有关使用 Cytoscape.js 进行 Web 应用程序开发的示例和教程，请访问以下网站：

https://github.com/cytoscape/cyjs-sample/wiki

有问题吗？¶

如果您对使用 Cytoscape 和 Cytoscape.js 进行 Web 应用程序开发有任何疑问或意见，请发送至我们的邮件列表。