当前位置：首页 > 行业动态 > 正文

cytoscape.js 教程

问题：，cytoscape.js 教程是什么？ 简答：，Cytoscape.js 是一个用于在网页上展示交互式网络图的 JavaScript 库。

Cytoscape.js 教程

Cytoscape.js 是一个强大的图网络可视化库，常用于创建交互式的节点和边网络图，以下是关于 Cytoscape.js 的详细教程：

一、安装与引入

1、通过 NPM 安装

在项目目录中打开终端或命令提示符，运行以下命令来安装 Cytoscape.js：

 npm install cytoscape

2、通过 CDN 引入

如果你不想使用 npm 安装，也可以通过 CDN 引入 Cytoscape.js，在你的 HTML 文件中添加以下<script>

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

二、创建基本的 Cytoscape.js 实例

1、HTML 结构

创建一个基本的 HTML 文件，包含一个用于容纳图表的容器元素（如div）：

 <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Cytoscape.js Tutorial</title>
         <style>
             body {
                 font-family: Arial, sans-serif;
             }
             #cy {
                 width: 100%;
                 height: 600px;
                 background-color: #f9f9f9;
             }
         </style>
     </head>
     <body>
         <h1>Cytoscape.js Example</h1>
         <div id="cy"></div>
         <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
         <script>
             // JavaScript code will go here
         </script>
     </body>
     </html>

2、初始化 Cytoscape.js 实例

在<script> 标签中编写 JavaScript 代码，初始化 Cytoscape.js 实例：

 document.addEventListener('DOMContentLoaded', function () {
         var cy = cytoscape({
             container: document.getElementById('cy'), // 容器元素
             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、节点（Nodes）

cytoscape.js 教程

节点是图中的点，表示实体，可以通过elements 数组中的{ data: { id: ..., label: ... } } 对象来定义节点。

 { data: { id: 'a', label: 'Node A' } }

2、边（Edges）

边是图中连接两个节点的线，表示关系，通过source 和target 属性指定边的起始和结束节点。

 { data: { source: 'a', target: 'b' } }

3、样式（Styles）

样式通过选择器（selector）绑定到节点和边，可以使用 CSS 样式属性来设置颜色、字体等。

 {
         selector: 'node',
         style: {
             'background-color': '#61bffc',
             'label': 'data(label)'
         }
     },
     {
         selector: 'edge',
         style: {
             'line-color': '#ccc',
             'target-arrow-shape': 'triangle',
             'target-arrow-color': '#ccc'
         }
     }

4、布局（Layouts）

布局算法用于自动调整图中节点和边的位置，Cytoscape.js 提供了多种布局算法，如grid、circle、cose 等，可以在初始化实例时通过layout 选项设置布局算法：

 layout: {
         name: 'grid'
     }

5、事件（Events）

cytoscape.js 教程

Cytoscape.js 支持多种事件监听，如点击、拖动、鼠标悬浮等，可以通过cy.on() 方法绑定事件处理程序，监听节点的点击事件：

 cy.on('click', 'node', function (event) {
         var node = event.target;
         console.log('Clicked node: ' + node.id());
     });

四、动态更新图表

1、添加节点和边

使用cy.add() 方法可以动态添加节点和边，添加一个新的节点：

 cy.add({ group: 'nodes', data: { id: 'c', label: 'Node C' } });

添加一条新的边：

 cy.add({ group: 'edges', data: { source: 'a', target: 'c' } });

2、删除节点和边

使用cy.$(...).remove() 方法可以删除指定的节点或边，删除节点c：

 cy.$('#c').remove();

删除边ac：

 cy.$('edge[source="a"][target="c"]').remove();

3、更新节点和边的属性

cytoscape.js 教程

使用cy.$(...).data() 方法可以更新节点或边的数据属性，更新节点a 的标签：

 cy.$('#a').data('label', 'Updated Node A');

更新边ab 的颜色：

 cy.$('edge[source="a"][target="b"]').style('line-color', '#ff0000');

五、常见问题解答（FAQs）

1、如何更改节点的大小？

答：可以通过设置节点的width 和height 样式属性来更改节点的大小。

 {
         selector: 'node',
         style: {
             'width': '60px',
             'height': '60px'
         }
     }

2、如何实现节点的拖拽功能？

答：Cytoscape.js 默认支持节点的拖拽功能，如果需要禁用或自定义拖拽行为，可以通过设置pan 和zoom 事件处理程序来实现，禁用拖拽：

 cy.panningEnabled(false);
Cytoscape.js教程网络图可视化

相关文章