vis.js network，基本教程

最新推荐文章于 2024-05-10 09:47:40 发布

王海虎

最新推荐文章于 2024-05-10 09:47:40 发布

阅读量1.4w

点赞数 6

分类专栏： vis 文章标签： vis

本文链接：https://blog.csdn.net/xiaohu12685/article/details/81094310

版权

vis 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这两天用到vis，写一个拖拽的效果，发现vis类的博客文章都特别少，可能用的人还不是特别的，vis目前没有中文文档，英文不好的同学可能有些头痛了，今天我给大家分享一下vis等经验。

1.第一步，先下载vis

<html>
<head>
    <script type="text/javascript" src="./dist/vis.js"></script>
    <link href="./dist/vis.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
    // create an array with nodes
    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'}
    ]);

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

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};

    // initialize your network!
    var network = new vis.Network(container, data, options);
</script>
</body>
</html>

我们这里只用到vis的js文件和css文件，然后这个demo就出来了，这个demo就是官网演示的demo

怎么样，你学会了吗。可以在稍加一点改动，再看看

var options = {
    configure: {
        enabled: true,
        filter: 'nodes,edges',
        container: undefined,
        showButton: true
    }
}

这样调试窗口就出来了

详情大家可以看官方文档

希望对大家有帮助

王海虎

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
8
评论
vis.js network，基本教程

这两天用到vis，写一个拖拽的效果，发现vis类的博客文章都特别少，可能用的人还不是特别的，vis目前没有中文文档，英文不好的同学可能有些头痛了，今天我给大家分享一下vis等经验。1.第一步，先下载vis&lt;html&gt;&lt;head&gt; &lt;script type="text/javascript" src="./dist/vis.js"&gt;&lt;...
复制链接

扫一扫