Cytoscape.js的安装与使用( 附：测试demo)

Cytoscape 是一个强大的图网络可视化库，常用于创建交互式的节点和边网络图。以下是关于 Cytoscape 的详细安装和功能介绍：

1. Cytoscape 安装

Cytoscape 有两种版本：

Cytoscape 桌面应用程序：用于处理大型网络数据，适用于生物信息学和系统生物学研究。
Cytoscape.js：一个基于 JavaScript 的前端图网络可视化库，适合 Web 应用程序开发。
(1) 安装 Cytoscape.js
安装方法
Cytoscape.js 可通过 npm 或 CDN 安装：

1.使用 npm 安装：

bash 
npm install cytoscape

2.通过 CDN 引入： 在 HTML 文件中添加以下脚本标签：

html 
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

3.验证安装： 在 JavaScript 文件中导入 Cytoscape：

javascript 
const cytoscape = require('cytoscape');

const cy = cytoscape({
   
  container: document.getElementById('cy'), // 绑定 HTML 容器
  elements: [], // 图的初始数据
  style: [], // 样式
});
console.log(cy); // 验证 Cytoscape 实例是否成功初始化

(2) 安装 Cytoscape 桌面应用程序

1.下载 Cytoscape： 前往 Cytoscape 官网 下载适合的版本。

2.安装： 根据操作系统（Windows、macOS、Linux）运行安装包。

3.运行： 安装完成后，启动 Cytoscape，并使用其内置的工具和插件来加载和分析网络数据。

2. Cytoscape.js 的核心功能
Cytoscape.js 提供了丰富的 API，适合前端开发人员。以下是其核心功能介绍：

(1) 初始化网络图
通过 cytoscape() 函数初始化 Cytoscape 实例：

javascript 
const cy = cytoscape({
   
  container: document.getElementById('cy'), // 图形绑定的 HTML 元素
  elements: [                               // 初始元素（节点和边）
    {
    data: {
    id: 'a', label: 'Node A' } }, // 节点
    {
    data: {
    id: 'b', label: 'Node B' } },
    {
    data: {
    source: 'a', target: 'b' } }, // 边
  ],
  style: [                                  // 样式设置
    {
   
      selector: 'node',
      style: {
   
        'background-color': '#61bffc',
        label: 'data(label)',
      },
    },
    {
   
      selector: 'edge',
      style: {
   
        'line-color': '#ccc',
        'target-arrow-shape': 'triangle',
        'target-arrow-color': '#ccc',
      },
    },
  ],
  layout: {
    name: 'grid' },                 // 布局算法
});

(2) 基本概念
节点 (Nodes)：图的点，表示实体。
边 (Edges)：图的线，表示关系。
样式 (Styles)：通过选择器 (selector) 为节点和边设置样式。
布局 (Layouts)：自动调整图中节点和边的位置。
事件 (Events)：支持点击、拖拽、鼠标悬浮等交互事件。
(3) 样式设置
样式通过选择器绑定到节点和边。示例：

javascript 
const style = [
  {
   
    selector: 'node',
    style: {
   
      label: