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

如何使用Cytoscape.js创建交互式网络图实例？

admin
行业动态
2025-01-28
5

Cytoscape.js 是一个用于可视化和分析网络的 JavaScript 图形库，提供丰富功能与灵活 API，可创建交互式、可定制的网络图。

Cytoscape.js 是一个开源的图可视化库，用于在 Web 页面上展示交互式的图形网络，它提供了丰富的功能和灵活的 API，使得开发者可以轻松地创建、操作和分析复杂的图形结构，下面将通过一个实例来详细介绍如何使用 Cytoscape.js 创建一个基本的图形可视化应用。

实例：使用 Cytoscape.js 创建一个简单的社交网络图

引入 Cytoscape.js 库

在你的 HTML 文件中引入 Cytoscape.js 的核心库和样式文件，你可以通过 CDN 引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cytoscape.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.20.0/cytoscape.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.20.0/cytoscape.min.css">
</head>
<body>
    <div id="cy"></div>
    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

初始化 Cytoscape 容器

在<script> 标签中，首先获取页面中的容器元素，并初始化 Cytoscape 实例：

var cy = cytoscape({
    container: document.getElementById('cy'), // 容器元素
    elements: [ // 初始元素集合
        { data: { id: 'a', label: 'Node A' } },
        { data: { id: 'b', label: 'Node B' } },
        { data: { id: 'c', label: 'Node C' } },
        { data: { id: 'ab', source: 'a', target: 'b' } },
        { data: { id: 'bc', source: 'b', target: 'c' } },
        { data: { id: 'ca', source: 'c', target: 'a' } }
    ],
    style: [ // 样式配置
        {
            selector: 'node',
            style: {
                'background-color': '#666',
                'label': 'data(label)'
            }
        },
        {
            selector: 'edge',
            style: {
                'width': 3,
                'line-color': '#ccc',
                'target-arrow-color': '#ccc',
                'target-arrow-shape': 'triangle'
            }
        }
    ],
    layout: {
        name: 'grid'
    }
});

添加交互功能

为了使图形具有交互性，可以添加事件监听器，例如点击节点时显示详细信息：

cy.on('tap', 'node', function(evt){
    var node = evt.target;
    var popupText = `ID: ${node.id()}
Label: ${node.data('label')}`;
    var popup = node.popper({
        content: popupText,
        gravity: 'top',
        padding: 10,
        backgroundColor: '#f7f7f7',
        boxShadow: '0px 2px 15px -5px rgba(0,0,0,0.4)'
    });
    node.popperRef().show();
});