cytoscapejs教程

Cytoscape.js教程

一、简介与安装

Cytoscape.js是一个用于创建交互式网络的可视化库，广泛应用于生物信息学、社会网络分析和药物发现等领域，它包含图论模型和可选的渲染器，旨在使程序员和科学家能够轻松地在应用程序中使用图形理论。

安装方法：

1、使用npm安装：

 npm install cytoscape

2、通过CDN引入：

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

3、验证安装：

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

二、基本使用

创建网络图：

通过cytoscape()函数初始化Cytoscape实例，并设置容器、元素、样式和布局等参数。

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' },                 // 布局算法
});

三、图形操作

添加元素：

1、添加单个节点：

 cy.add({
     group: 'nodes',
     data: { weight: 75 },
     position: { x: 200, y: 200 }
   });

2、添加节点和边：

 var eles = cy.add([
     { group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } },
     { group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } },
     { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } }
   ]);

删除元素：

1、移除单个元素：

 var j = cy.$('#j');
   cy.remove(j);

2、移除集合中的元素：

 var collection = cy.elements('node[weight > 50]');
   cy.remove(collection);

3、使用选择器进行元素删除：

 var collection = cy.elements('node[weight > 50]');
   cy.remove(collection);

使用集合：

cy.collection() // 获取一个空集合
例如使用集合保存被点击过的节点
var collection = cy.collection();
cy.nodes().on('click', function(e){
  var clickedNode = e.target;
  collection = collection.union(clickedNode);
});

获取指定元素：

cy.getElementById('j'); // 参数为元素的id值

元素匹配：

1、cy.$(selector)：获取匹配选择器的元素。

2、cy.elements(selector)：获取匹配选择器的节点或边。

3、cy.nodes(selector)：获取匹配选择器的节点。

4、cy.edges(selector)：获取匹配选择器的边。

5、cy.filter(selector)：过滤元素。

6、cy.filter((ele, i, eles) => {})：使用回调函数实现元素过滤。

批量操作：

cy.batch(() => {
  // do something
});
cy.startBatch(); // 手动开始批量操作，主要用于异步操作
cy.endBatch(); // 手动结束批量操作，主要用于异步操作

四、布局与样式

布局算法：

Cytoscape.js提供了多种布局算法，如Grid、Circle、Force-directed等，可以通过layout选项设置布局，也可以动态更新布局。

cy.layout({ name: 'circle' }).run();

样式设置：

样式通过选择器绑定到节点和边，示例如下：

const style = [
  {
    selector: 'node',
    style: {
      label: 'data(label)',         // 标签来源于节点数据
      'background-color': '#61bffc', // 节点颜色
    },
  },
  {
    selector: 'edge',
    style: {
      'line-color': '#ccc',           // 边的颜色
      'target-arrow-shape': 'triangle', // 边的箭头形状
      'target-arrow-color': '#ccc',    // 箭头颜色
    },
  },
];

五、事件绑定与动态更新

事件绑定：

支持多种事件监听，如点击、拖动、鼠标悬浮等，示例如下：

cy.on('click', 'node', (event) => {
  const node = event.target;
  console.log(Clicked node: ${node.id()});
});

动态更新：

可以动态添加、删除节点和边，以及更新节点属性，示例如下：

// 添加节点
cy.add({ group: 'nodes', data: { id: 'c', label: 'Node C' } });
// 删除节点
cy.$('#c').remove();
// 更新节点属性
cy.$('#a').data('label', 'Updated Node A');

六、扩展功能与插件

Cytoscape.js支持丰富的扩展插件，如cola.js（力导向布局）、dagre.js（分层布局）、cytoscape-context-menus（上下文菜单扩展）等，可以通过npm安装扩展。

npm install cytoscape-cola cytoscape-dagre cytoscape-context-menus