vue用vis插件如何实现网络拓扑图【vue教程】

目录

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

npm install vis

import { DataSet, Network } from "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()
}

//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;
    }