vue用vis插件如何实现网络拓扑图

目录

• vis插件实现网络拓扑图
• 安装引入vis
• vis使用示例
• vis官方文档
• vis.js网络拓扑图点击折叠节点和展开节点
• 首先看一下效果图

vis插件实现网络拓扑图

安装引入vis

1.npm安装vis

npm install vis

2.引入vis

import { DataSet, Network } from 'vis';

vis使用示例

methods:{
   globalTrace () {
      // create an array with nodes
      var nodes = new 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 DataSet([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
      ]);
      // create a network
      var container = document.querySelector('#global_trace_content');
      // provide the data in the vis format
      var data = {
          nodes: nodes,
          edges: edges
      };
      var options = {
      	//节点样式
        nodes: {
          shape: "box",//设置节点node样式为矩形
          fixed:true,//节点node固定不可移动
          font: {
			color: "white", //字体的颜色
			size: 30 //显示字体大小
		  },
          scaling: {
			min: 16,
			max: 32 //缩放效果比例
		  },
        },
        //连接线的样式
        edges: {
          color: {
            color: "rgb(97, 168, 224)",
            highlight: "rgb(97, 168, 224)",
            hover: "green",
            inherit: "from",
            opacity: 1.0
          },
          font: { 
            align: "top",//连接线文字位置
          },
          smooth: true, //是否显示方向箭头
          arrows: {to : true },//箭头指向from节点
        },
        layout: {
        //以分层方式定位节点
          hierarchical: {
            direction: "LR",//分层排序方向
            sortMethod: "directed",//分层排序方法
            levelSeparation:400//不同级别之间的距离
          },
        },
        interaction: {
          navigationButtons: true,
          // hover: true, //鼠标移过后加粗该节点和连接线
          selectConnectedEdges: false, //选择节点后是否显示连接线
        },
        
      };
      // initialize your network!
      this.network = new Network(container, data, options);
      this.network.on("click",e=> this.showDetail(e));//单击事件
      this.network.on("doubleClick",e=> this.enterService(e))//双击事件
    },
},
mounted(){
	this.globalTrace()
}

vis官方文档

使用文档

官方示例

vis.js网络拓扑图点击折叠节点和展开节点

首先看一下效果图

1.数据中要添加的属性如下图所示：

2.数据中添加入上图属性后，添加点击事件即可，代码如下：

//todo 双击时折叠和展开
    network.on("doubleClick", function(params) {//双击事件
        if (params.nodes.length != 0) {//确定为节点双击事件
            var click_node_id = params.nodes[0];
            remove_all_sub_nodes(click_node_id);
        }
    });
 
    //todo 删除下级所有节点
    function remove_all_sub_nodes(node_id) {
        var sub_nodes = get_directly_sub_nodes(node_id);
        // console.log('sub_nodes',sub_nodes)
        if (sub_nodes.length == 0) {//当前点击的为叶子节点
            //判断是否有下级节点
            // console.log('sub',allNodes[node_id - 1]['subids']);
            if (typeof (allNodes[node_id - 1]['subids']) != 'undefined') {
                $.each(allNodes[node_id - 1]['subids'], function(index, item) {
                    // console.log('allNodes[item - 1]',allNodes[item - 1])
                    nodes.add(allNodes[item - 1]);
                    edges.add({id: node_id + '_' + item, from: node_id, to: item});
                });
            } else {
                alert('当前为叶子节点');
            }
        } else {
            $.each(sub_nodes, function(index, item) {
                var sub_sub_nodes = get_directly_sub_nodes(item);
                if (sub_sub_nodes.length == 0) {
                    nodes.remove({id: item});
                    edges.remove({id: node_id + '_' + item});
                } else {
                    remove_all_sub_nodes(item);
                }
                nodes.remove({id: item});
                edges.remove({id: node_id + '_' + item});
            });
        }
    }
 
    //todo 获取某节点直属下级节点
    function get_directly_sub_nodes(node_id) {
        var return_nodes = [];
        var connectedNodes = network.getConnectedNodes(node_id);//获取所有连接节点
        $.each(connectedNodes, function(index, item) {
            // console.log('allNodes',allNodes)
            if (item != allNodes[node_id - 1]['pid']) {//当前节点的父节点 ，不操作
                return_nodes.push(item);
            }
        });
        return return_nodes;
    }

3.完整代码如下：

    
    
    
    
    
    
 
    
    
    





    

        
 下线
        
 通行
    



    

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。