vis.js网络拓扑图第一个demo，vis-network.min.js的下载

笑到世界都狼狈

已于 2022-11-09 19:58:45 修改

阅读量1.7k

点赞数 1

分类专栏： vis.js 文章标签： vis.js的第一个demo vis-network.js

于 2020-09-09 14:35:03 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/108488748

版权

vis.js 专栏收录该内容

8 篇文章 10 订阅

订阅专栏

在vis.js的中文文档里有个demo，复制粘贴出来跑跑，是可以运行的

地址：vis-network 入门 | Ame's blog

1.源码是这样的，粘贴出来就可以跑：

//源码
<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>

2. 大家可以在代码中看到vis-network.min.js是引用的网页版的，那么要怎么搞到js放到本地项目中呢？看下图

左边是跑出来的效果，右边是浏览器f12下找到js,然后ctrl+a,,,,ctrl+c将js复制粘贴，自己新建一个js文件将js粘贴进去就好了