vis.js network 图谱层级设置小demo 基本操作，单击，双击

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

九瓜

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

阅读量1.8k

点赞数

分类专栏： vis.js 文章标签： vis.js 图谱 network 层级图谱 vis.js层级图谱

本文链接：https://blog.csdn.net/weixin_43796109/article/details/103095188

版权

vis.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用vis.js绘制图谱可以实现网络拓扑功能，下面就给大家介绍一下层级图谱的操作，

完成一个最简单的网络图，需要两个资源文件：

vis.js
vis.css
下载地址：https://visjs.org/#download_install
当然在官网也有层级图谱这方便的讲解，同学可以参考：官方层级图谱

先看一下效果图是不是你想要的效果：
在这里插入图片描述
下面就看一下我这个菜鸡写的小demo，这个是在python的django里写的html，

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'vis/vis.min.js' %}"></script>
</head>
<style>
    #mynetwork{
        width: 1300px;
        height: 799px;
        border: 1px solid lightgray;
    }
</style>
<body>
{#   画布   #}
<div id="mynetwork"></div>
<span></span>

</body>
<script>
{#    绘制函数    #}
    function draw() {
        var container = document.getElementById('mynetwork');
        var n = [];
        var e = [];
        {#    模拟生成参数  在实际应用中这些参数都是由后台传递过来 #}
        for (var i = 0; i < 20; i++) {
                {#   节点参数    #}
                n.push({id: i, label: String(i)})
            }
            {#  节点之间的边长参数   #}
            e.push({from: 0, to: 1, label: 5,id:'0_1'});
            e.push({from: 0, to: 2, label: 4,id:'0_2'});
            e.push({from: 0, to: 3, label: 3,id:'0_3'});
            e.push({from: 0, to: 4, label: 1,id:'0_4'});
            e.push({from: 1, to: 5, label: 3,id:'1_5'});
            e.push({from: 2, to: 3, label: 6,id:'2_3'});
            e.push({from: 2, to: 6, label: 11,id:'2_6'});
            e.push({from: 3, to: 7, label: 6,id:'3_7'});
            e.push({from: 1, to: 10, label: 2,id:'1_10'});
            e.push({from: 1, to: 11, label: 3,id:'1_11'});
            e.push({from: 2, to: 8, label: 4,id:'2_8'});
            e.push({from: 2, to: 9, label: 2,id:'2_9'});
            e.push({from: 12, to: 9, label: 2,id:'12_9'});
            e.push({from: 1, to: 12, label: 1,id:'1_12'});
            e.push({from: 3, to: 14, label: 2,id:'3_14'});
            e.push({from: 13, to: 15, label: 2,id:'13_15'});
            e.push({from: 13, to: 16, label: 2,id:'13_16'});
            e.push({from: 13, to: 17, label: 2,id:'13_17'});
            e.push({from: 13, to: 18, label: 2,id:'13_18'});
            e.push({from: 18, to: 19, label: 2,id:'18_19'});
            {#   对节点设置层级   #}
            n[0]["level"] = 0;
            n[1]["level"] = 1;
            n[2]["level"] = 0;
            n[3]["level"] = 1;
            n[4]["level"] = 1;
            n[5]["level"] = 2;
            n[6]["level"] = 1;
            n[7]["level"] = 2;
            n[8]["level"] = 1;
            n[9]["level"] = 2;
            n[10]["level"] = 2;
            n[11]["level"] = 2;
            n[12]["level"] = 2;
            n[13]["level"] = 0;
            n[14]["level"] = 2;
            n[15]["level"] = 1;
            n[16]["level"] = 1;
            n[17]["level"] = 1;
            n[18]["level"] = 1;
            n[19]["level"] = 2;

            var data = {
                edges: e,
                nodes: n,
            };
            {#  效果设置   #}
            var options = {
                scale:0.8,    
                nodes: {
                    shape: 'dot',
                    size: 15,
                },
                edges: {
                    smooth: false,
                    arrows: {
                        to: true
                    }
                },
                // 布局
                layout: {
                    //分级
                    hierarchical: {
                        levelSeparation: 150,    //不同层次之间的距离
                        nodeSpacing: 200,        //自由轴上节点之间最小距离
                        treeSpacing: 500,         //不同树之间的距离
                        // 方向
                        direction: 'UD',
                        sortMethod: 'hubsize'   // hubsize, directed
                    }
                }
            };
            network = new vis.Network(container, data, options)
    }

draw();
    network.on('click',function (params) {
        if(params.nodes.length){
            $('span').html('单击' + params.nodes[0])
        }else if(params.edges.length){
            $('span').html('单击边长' + params.edges[0])
        }
    });
    network.on('doubleClick',function (params) {
        if(params.nodes.length){
            $('span').html('双击双击' + params.nodes[0])
        }
    })

</script>
</html>

九瓜

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
vis.js network 图谱层级设置小demo 基本操作，单击，双击

使用vis.js绘制图谱可以实现网络拓扑功能，下面就给大家介绍一下层级图谱的操作，完成一个最简单的网络图，需要两个资源文件：vis.jsvis.css下载地址：https://visjs.org/#download_install当然在官网也有层级图谱这方便的讲解，同学可以参考：官方层级图谱下面就看一下我这个菜鸡写的小demo，这个是在python的django里写的html，{% ...
复制链接

扫一扫