网络图库Cytoscape.js的使用（一）：初始化配置

最新推荐文章于 2024-04-30 16:57:21 发布

VIP文章黑猫_默雨

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量3.6k

点赞数 2

分类专栏：前端插件、组件、库等文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44001906/article/details/127513117

版权

文章目录

- Cytoscape.js的使用（初始化）

Cytoscape.js的使用（初始化）

官网：Cytoscape.js
github：GitHub - cytoscape/cytoscape.js: Graph theory (network) library for visualisation and analysis
注：本文主要讲在vue中如何使用Cytoscape.js，主要参考官方文档，由于文档是英文，翻译过程可能偶有出错，所以本文仅供参考。

简介

cytoscape是一个网络图的可视化工具，大量的生物分子/基因领域的公司用它来做可视化分析。由于它的通用性，慢慢的也被其他领域的人用来做网络的可视化和分析。cytoscape分为两种，一种叫做cytoscape desktop，是一个桌面软件，可以把数据导入然后生成可视化的网络图进行分析；另一种叫做cytoscape.js，是一个javascript库，主要给开发人员使用，来在网页上生成可视化的网络图。我们要用的是后者。

在vue中使用Cytoscape.js

安装
```
npm i cytoscape --save
```

引入：

全局引入：在 main.js 中引入

import cytoscape from 'cytoscape';
Vue.prototype.$cytoscape = cytoscape;

局部引入：在需要用到的模块中引入

import cytoscape from 'cytoscape'

简单案例：

<template>
    <div class="box">
      <div id="MainCy" style="width: 100%;height: 100%;"></div>
    </div>
</template>
<script>
    export default {
        mounted() {
            var cy = this.$cytoscape({
                container: document.getElementById('MainCy'),

                layout: {
                    name: 'grid',
                    rows: 2,
                    cols: 2
                },

                style: [{
                        selector: 'node',
                        style: {
                            'content': 'data(name)',
                            'background-color': '#3549fc',
                        }
                    },

                    {
                        selector: 'edge',
                        style: {
                            'content': 'data(relationship)',
                            'curve-style': 'bezier', 
                            'line-color': '#1db1b1',
                        }
                    },
                ],

                elements: {
                    nodes: [
                        {
                            data: {
                                id: 'j',
                                name: 'Jerry'
                            }
                        },
                        {
                            data: {
                                id: 'e',
                                name: 'Elaine'
                            }
                        },
                        {
                            data: {
                                id: 'k',
                                name: 'Kramer'
                            }
                        },
                        {
                            data: {
                                id: 'g',
                                name: 'George'
                            }
                        },
                    ],
                    edges: [
                        {
                            data: {
                                source: 'e',
                                target: 'k',
                                relationship: '1'
                            }
                        },
                        {
                            data: {
                                source: 'k',
                                target: 'e',
                                relationship: '2'
                            }
                        },
                        {
                            data: {
                                source: 'k',
                                target: 'j',
                                relationship: '3'
                            }
                        },
                        {
                            data: {
                                source: 'k',
                                target: 'g',
                                relationship: '4'
                            }
                        },
                        {
                            data: {
                                source: 'e',
                                target: 'j',
                                relationship: '5'
                            }
                        },
                    ]
                }
            });
            cy.nodes().on('click', (evt) => {
                console.log(evt)
            });
            cy.edges().on('click', (evt) => {
                console.log(evt)
            });
        },
    }
</script>

<style lang="scss" scoped>
.box{
  width: 500px;
  height: 500px;
  background-color: #cbe8ff;
}
</style>

效果：
在这里插入图片描述

创建实例

一个Cytoscape.js的实例对应一个图表，创建实例的方式如下：

var cy = cytoscape({
   
  	container: document.getElementById('MainCy'),
});

配置选项

基本选项

container：图表容器

一个HTML DOM元素，呈现图形的容器（必须指定宽高，否则渲染不出图表）。
```
container: document.getElementById('MainCy'),
```

elements：图表元素

格式示例

elements: [
    {
      // node n1
        group: 'nodes', // 'nodes'是节点元素, 'edges'是边线元素
        //group字段可以自动推断出来，但是指定它会在初始化元素时给您很好的调试消息
        data: {
      //元素数据 (使用json可序列化的数据)
            id: 'n1', // 每个元素的必选(string) id，在未定义时自动赋值
            parent: 'nparent', // 指示复合节点父id; 未指定则没有父节点
            // (`parent` 可以被 `eles.move()` 改变)
        },

        //临时数据(通常是临时数据或非序列化数据)
        scratch: {
     
            _foo: 'bar' // app fields prefixed by underscore; extension fields unprefixed
        },

        position: {
      //节点的模型位置(初始化时可选，初始化后必选)
            x: 100,
            y: 100
        },

        selected: false, // 元素是否被选中(默认为false)
        selectable: true, // 选择状态是否可变(默认为true)
        locked: false, // 锁定时，节点的位置是不可变的(默认为false)
        grabbable: true, // 节点是否可以被用户抓取和移动
        pannable: false, //拖动节点是否会导致平移而不是抓取
        classes: ['foo', 'bar'], //元素的类名数组(或空格分隔的字符串)

        //除非绝对必要，否则不要使用' style '字段，而是使用STYLESHEET代替
        style: {
      // 会覆盖外部其他样式属性
            'background-color': 'red'
        }
    },
    {
      // node n2
        data: {
      id: 'n2' },