Cytoscape.js 入门指南：从零开始构建网络图

前言

Cytoscape.js 是一个功能强大的开源网络图可视化库，专为生物信息学、社交网络分析等需要复杂关系可视化的场景设计。本文将带你从零开始学习如何使用这个工具。

环境准备

引入方式选择

根据你的开发环境，可以选择以下几种引入方式：

1. 传统HTML引入（适合简单项目）：

   <script src="cytoscape.min.js"></script>
   

2. ES6模块化引入（现代前端项目推荐）：

   <script type="module">
   import cytoscape from "./cytoscape.esm.min.js";
   </script>
   

3. 包管理器安装：

   • npm: npm install cytoscape
   • Bower: bower install cytoscape

重要注意事项

Cytoscape.js 在初始化时会读取容器元素的尺寸信息，因此务必确保CSS样式在脚本加载前就已定义。否则可能导致渲染异常。

推荐的基础CSS样式：

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

核心初始化

创建Cytoscape实例是使用该库的第一步：

const cy = cytoscape({
  container: document.getElementById('cy') // 指定渲染容器
});

如果是无界面环境（如Node.js），可以省略container参数或显式设置headless: true。

基础配置详解

一个完整的Cytoscape.js配置通常包含以下几个关键部分：

1. 元素定义(elements)

定义图中的节点和边：

elements: [
  { // 节点a
    data: { id: 'a' }
  },
  { // 节点b
    data: { id: 'b' }
  },
  { // 边ab
    data: { 
      id: 'ab', 
      source: 'a', 
      target: 'b' 
    }
  }
]

2. 样式定义(style)

使用类似CSS的语法定义图元素样式：

style: [
  {
    selector: 'node',
    style: {
      'background-color': '#666',
      'label': 'data(id)' // 显示节点ID
    }
  },
  {
    selector: 'edge',
    style: {
      'width': 3,
      'line-color': '#ccc',
      'target-arrow-color': '#ccc',
      'target-arrow-shape': 'triangle'
    }
  }
]

3. 布局设置(layout)

选择并配置布局算法：

layout: {
  name: 'grid',  // 网格布局
  rows: 1        // 单行排列
}

完整示例代码

将上述配置组合起来：

const cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b' } }
  ],
  
  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  
  layout: {
    name: 'grid',
    rows: 1
  }
});

进阶学习建议

掌握了这些基础知识后，你可以进一步探索：

1. 动态添加/删除图元素
2. 实现交互功能（点击、拖拽等）
3. 使用不同的布局算法
4. 处理大规模数据集的优化技巧

常见问题

1. 为什么我的图显示不正常？

   • 检查容器元素尺寸是否正确定义
   • 确认样式表在脚本之前加载

2. 如何支持旧浏览器？

   • 考虑使用babel-polyfill或core-js

3. 无界面环境如何使用？

   • 设置headless: true或省略container参数

通过本指南，你应该已经掌握了Cytoscape.js的基础使用方法。接下来可以尝试构建自己的网络可视化应用了。