Vis.js教程（二）：基础关系图实现

叁拾舞

已于 2023-12-08 15:41:38 修改

阅读量863

点赞数 6

分类专栏： Vis.js 文章标签： Vis.js 前端

于 2023-12-05 09:25:38 首次发布

本文链接：https://blog.csdn.net/WwLK123/article/details/134798540

版权

Vis.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先引用所需要的css和js文件

<link href="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/dist/dist/vis-network.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/standalone/umd/vis-network.min.js"></script>

接着添加一个div容器，用于展示关系图

<div id="mynetwork" style="width: 1000px;height: 800px;box-shadow: 10px 5px 5px lightgray;">

</div>

然后创建关系图的节点和边

 // create an array with nodes
    const nodes = new vis.DataSet([
        {id: 1, label: "菲尼克斯", color:'#F9D016'},
        {id: 2, label: "太阳", color:'#FF692D'},
        {id: 3, label: "布克", color:'#8B8DFE'},
        {id: 4, label: "杜兰特", color: '#8B8DFE'},
        {id: 5, label: "比尔", color: '#8B8DFE'},
    ]);

    // create an array with edges
    const edges = new vis.DataSet([
        {from: 1, to: 2},
        {from: 2, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5},
    ]);

最后，渲染节点和边到div上展示

// create a network
    const container = document.getElementById("mynetwork");
    const data = {
        nodes: nodes,
        edges: edges,
    };
    const options = {};
    const network = new vis.Network(container, data, options);

注意：这里的mynetwork要和上面添加的div的id保持一致。

实现效果图

在这里插入图片描述
现在看起来所有的节点都是一样的，不容易区分，我们可以给相同类型的节点赋值相同的颜色。

只需给节点添加color属性即可

const nodes = new vis.DataSet([
        {id: 1, label: "菲尼克斯", color:'#D6AE10'},
        {id: 2, label: "太阳", color:'#FF692D'},
        {id: 3, label: "布克", color:'#8B8DFE'},
        {id: 4, label: "杜兰特", color: '#8B8DFE'},
        {id: 5, label: "比尔", color: '#8B8DFE'},
    ]);

修改之后效果图如下，这样看起来就比较直观了：
在这里插入图片描述

我们可以通过添加配置项options自定义关系图的样式

比如：修改节点的边的宽度、修改节点字体的颜色，只需添加如下代码即可：

const options = {
        nodes:{
            borderWidth: 2,
            font:{
                face: 'arial',
                color: '#fff',
                bold: true,
            }
        }
    };

修改效果如下：
在这里插入图片描述

备注：整体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/dist/dist/vis-network.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/standalone/umd/vis-network.min.js"></script>
    <title>Dynamic Knowledge Graph</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="mynetwork" style="width: 1000px;height: 800px;box-shadow: 10px 5px 5px lightgray;">

</div>

<script>
    // create an array with nodes
    const nodes = new vis.DataSet([
        {id: 1, label: "菲尼克斯", color:'#D6AE10'},
        {id: 2, label: "太阳", color:'#FF692D'},
        {id: 3, label: "布克", color:'#8B8DFE'},
        {id: 4, label: "杜兰特", color: '#8B8DFE'},
        {id: 5, label: "比尔", color: '#8B8DFE'},
    ]);

    // create an array with edges
    const edges = new vis.DataSet([
        {from: 1, to: 2},
        {from: 2, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5},
    ]);

    // create a network
    const container = document.getElementById("mynetwork");
    const data = {
        nodes: nodes,
        edges: edges,
    };
    const options = {
        nodes:{
            borderWidth: 2,
            font:{
                face: 'arial',
                color: '#fff',
                bold: true,
            }
        }
    };
    const network = new vis.Network(container, data, options);
</script>
</body>
</html>