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

cytoscapejs实例

Cytoscape.js实例是用JavaScript库构建交互式图形网络，如社交网络图展示节点关系。

Cytoscape.js实例：创建和可视化一个简单的网络图

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

一、Cytoscape.js 简介

1、历史：Cytoscape 创建于多伦多大学并发表在牛津生物信息学（2016 年、2023 年）。

2、特点：轻量级的图网络库，专为绘制复杂的网络图而设计，支持节点和边的可视化，具有内置放缩、平移、拖动、点击交互、选择节点等功能，还支持复杂的样式和动画效果，支持多种布局算法，如力导向布局、同心圆布局等。

3、适用场景：知识图谱、社交网络分析、生物网络可视化等。

cytoscapejs实例

4、优点：开箱即用，功能强大。

5、官网：[Cytoscape.js](https://js.cytoscape.org/)

二、常用布局

布局名称 特点 常用参数 适用场景
Grid 网格状排列节点 rows, cols 规则分布的图表
Circle 节点排列成圆形 radius, startAngle, endAngle 环形关系、闭环网络
Concentric 同心圆排列，按节点属性分层 minNodeSpacing, levelWidth 分层结构、中心 外围关系图
Breadthfirst 基于广度优先搜索的层次布局 root, spacingFactor, directed 树形结构、层次关系图
Dagre DAG（有向无环图）布局 rankDir, nodeSep, rankSep 流程图、依赖关系图
Cose 力导向布局，基于物理力学模型 idealEdgeLength, nodeRepulsion, gravity 复杂网络、社交关系图
Klay 层次化布局（需要插件） direction, spacing, edgeSpacingFactor 大型有向图、流程图

三、简单示例代码

以下是一个使用 Cytoscape.js 创建和可视化简单网络图的完整示例代码，该示例展示了如何在 HTML 页面中加载 Cytoscape.js 库，并创建一个包含节点和边的基本网络图。

<!DOCTYPE html>
<html>
<head>
    <title>Cytoscape.js 简单示例</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
    <style>
        body {
            font-family: arial;
            font-size: 14px;
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
        }
        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body style="background-color: grey;">
    <div id="cy"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var cy = window.cy = cytoscape({
                container: document.getElementById('cy'), // 容器元素
                style: [ // 样式设置
                    {
                        selector: 'node', // 节点样式
                        style: {
                            'background-color': '#7B68EE',
                            'content': 'data(id)'
                        }
                    },
                    {
                        selector: 'edge', // 边样式
                        style: {
                            'curve-style': 'bezier',
                            'target-arrow-shape': 'triangle'
                        }
                    }
                ],
                elements: { // 图的初始数据，包括节点和边
                    nodes: [ // 节点数组
                        { data: { id: 'a' } },
                        { data: { id: 'b' } }
                    ],
                    edges: [ // 边数组
                        { data: { id: 'ab', source: 'a', target: 'b' } }
                    ]
                },
                layout: { // 布局算法
                    name: 'grid' // 使用网格布局
                }
            });
        });
    </script>
</body>
</html>

上述代码中：

cytoscapejs实例

引入了 Cytoscape.js 的核心库文件cytoscape.min.js。

在 HTML 中创建了一个div 元素作为 Cytoscape.js 图形的容器，其 ID 为cy。

使用 JavaScript 代码初始化了一个 Cytoscape.js 实例，并将其绑定到容器元素上，同时设置了节点和边的样式，以及图的初始数据（包括两个节点和一条边），并指定了使用网格布局算法来排列节点。

四、相关问答FAQs

问题1：如何更改节点的形状？

cytoscapejs实例

解答：可以通过在样式设置中的style 对象里添加或修改shape 属性来更改节点的形状，将节点形状设置为矩形：

style: {
    selector: 'node',
    style: {
        'shape': 'rectangle', // 设置节点形状为矩形
        'background-color': '#7B68EE',
        'content': 'data(id)'
    }
}

问题2：如何实现点击节点时弹出提示框显示节点的 ID？

解答：可以使用 Cytoscape.js 的事件绑定功能来实现，监听节点的tap 事件，并在事件处理函数中使用alert 方法弹出提示框显示节点的 ID，示例如下：

cy.on('tap', 'node', function(event){
    var node = event.target;
    var nodeId = node.data('id');
    alert('节点ID: ' + nodeId);
});
Cytoscape.js图可视化网络图形

相关文章