vis network（visjs）安装简单使用

YouZi_X

已于 2022-09-19 13:34:41 修改

阅读量4.5k

点赞数 3

分类专栏： JavaScript visjs 文章标签： visjs

于 2021-11-24 00:24:01 首次发布

本文链接：https://blog.csdn.net/YouZi_X/article/details/121506120

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

visjs

8 篇文章 3 订阅

订阅专栏

vis.js可视化的出发点之一是它们可以处理动态数据，并允许对数据进行操作。为了实现这一点，vis.js包括一个基于灵活键/值 DataSet并DataView处理非结构化JSON数据的功能。

数据集DataSet，存储JSON的ID对象。可增删改查，过滤排序…
资料检视DataView，提供数据集上经过过滤或格式化的视图。通过订阅DataView中的更改，获取过滤或格式化的数据，而无需一直指定过滤器和字段类型
数据管道DataPipe,DataPipe从一个DataSet 获取数据DataView，对其进行转换并传入第二个 DataSet，用于强制数据类型，更改结构…

一、总结

Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：

一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化；
二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵；
三是图形，使用节点和边显示一个交互式图形或网络。

二、配置&使用

1.vis-network 入门

安装

# v4.21.0 不再维护
npm install vis
# v9.0.1 建议使用下面这个
npm install vis-network

引入 vis-network

<template>
    <div id="mynetwork" class="mynetwork"></div>
</template>

<script>
//v4.21.0
import * as vis from "vis";
export default {
    data() {
        return { network: null };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            // 节点
            var nodes = new vis.DataSet([
                { id: 1, label: "Node 1" },
                { id: 2, label: "Node 2" },
                { id: 3, label: "Node 3" },
                { id: 4, label: "Node 4" },
                { id: 5, label: "Node 5" },
            ]);
            //  边
            var edges = new vis.DataSet([
                { id: 1, from: 1, to: 3 },
                { id: 2, from: 1, to: 3 },
                { id: 5, from: 3, to: 1 },
                { from: 1, to: 2 },
                { from: 2, to: 4 },
                { from: 2, to: 5 },
                { from: 3, to: 3 },
            ]);
            // create a network
            var container = document.getElementById("mynetwork");
            var data = {
                nodes: nodes,
                edges: edges,
            };
            var options = {};
            this.network = new vis.Network(container, data,options);
        },
    },
};
</script>

<style scoped>
.mynetwork {
    height: 100%;
}
</style>

发现问题： v9.0.1，vue + vis-network，当 vis.network 存储在 data 中时，可新增节点，但新增边时，导致图形消失，console无报错

原因：

解决：

将 vis.network 对象移出 data() 方法
调整 vis.network ，使其不再使用原型链，所有选项折叠成一个对象（不推荐，具体请移步参考链接）

参考：https://github.com/almende/vis/issues/2567

v9.0.1使用

<template>
    <div id="mynetwork" class="mynetwork"></div>
</template>

<script>
// import * as vis from "vis-network";
const vis = require("vis-network/dist/vis-network.min.js");
// require("vis-network/dist/vis-network.min.css");
/*
*将 `vis.network` 对象移出 `data()` 方法
*/
var network = null;
export default {
    data() {
        return {};
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            // 节点
            var nodes = new vis.DataSet([
                { id: 1, label: "Node 1", title: "1111" },
                { id: 2, label: "Node 2" },
                { id: 3, label: "Node 3" },
                { id: 4, label: "Node 4" },
                { id: 5, label: "Node 5" },
            ]);

            //  边
            var edges = new vis.DataSet([
                { id: 1, from: 1, to: 3 },
                { id: 2, from: 1, to: 3 },
                { id: 5, from: 3, to: 1 },
                { from: 1, to: 2 },
                { from: 2, to: 4 },
                { from: 2, to: 5 },
                { from: 3, to: 3 },
            ]);

            // create a network
            var container = document.getElementById("mynetwork");
            var data = {
                nodes: nodes,
                edges: edges,
            };
            var options = {};
            network = new vis.Network(container, data, options);
            nodes.add({ id: 6, label: "Node 6" });
            network.on("click", function(e) {
                console.log(e);
                edges.add({ from: 3, to: 2 });
            });
        },
    },
};
</script>

<style scoped>
.mynetwork {
    height: 100%;
}
</style>

效果如下
在这里插入图片描述
html页面使用

<html>
<head>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>

<body>
<div id="mynetwork"></div>

<script type="text/javascript">
    // 创建节点数据数组
    var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" }
    ]);

    // 创建边数据数组
    var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 }
    ]);
    // 获取容器
    var container = document.getElementById('mynetwork');
    // 将数据赋值给vis 数据格式化器
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};
    // 初始化关系图
    var network = new vis.Network(container, data, options);
</script>
</body>
</html>