vue3.0+vis.js网络拓扑图点击节点的展开与收缩

自己学习所写，不是很标准，但是功能已经实现了，记录一下！

1.npm安装vis.js

npm install vis

2.在页面引入vis的DataSet和Network

import { DataSet, Network } from "vis";

3.在html中定义一个容器

<div id="mynetwork"></div>

//css样式可自定义
<style>
 #mynetwork {
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid lightgray;
    canvas {
      cursor: pointer;
    }
  }
</style>

  4.完整代码

<template>
    <div class="app">
        <div id="mynetwork"></div>
    </div>
</template>

<script>
import { DataSet, Network } from "vis";
import { ElMessage } from "element-plus";

export default{
    setup(){
        const init = () => {
          //定义需要生成的节点
          var allnodes = [
            {
              id: 1,
              label: "tnt",
              pid: 0,
              subids: [2, 9]
            },
            { id: 2, label: "刘耀文", pid: 1, subids: [3, 5] },
            {
              id: 3,
              label: "文文",
              pid: 2,
              subids: [4]
            },
            { id: 4, label: "宋亚轩", pid: 3 },
            {
              id: 5,
              label: "轩轩",
              pid: 2,
              subids: [7, 6]
            },
            { id: 6, label: "狼崽", pid: 5 },
            {
              id: 7,
              label: "狼王",
              pid: 5,
              subids: [8]
            },
            { id: 8, label: "小刘", pid: 7 },
            {
              id: 9,
              label: "吻文",
              pid: 1,
              subids: [10, 11]
            },
            { id: 10, label: "tyt", pid: 9 },
            {
              id: 11,
              label: "时代少年团",
              pid: 9,
              subids: [12, 13]
            },
            { id: 12, label: "长江国际", pid: 11 },
            {
              id: 13,
              label: "丁程鑫",
              pid: 11,
              subids: [14]
            },
            { id: 14, label: "18楼", pid: 13 }
          ];
          //定义节点连接线
          var alledges = [
            { id: "1_2", from: 1, to: 2 },
            { id: "2_3", from: 2, to: 3 },
            { id: "2_5", from: 2, to: 5 },
            { id: "3_4", from: 3, to: 4 },
            { id: "5_6", from: 5, to: 6 },
            { id: "5_7", from: 5, to: 7 },
            { id: "7_8", from: 7, to: 8 },
            { id: "1_9", from: 1, to: 9 },
            { id: "9_10", from: 9, to: 10 },
            { id: "9_11", from: 9, to: 11 },
            { id: "11_12", from: 11, to: 12 },
            { id: "11_13", from: 11, to: 13 },
            { id: "13_14", from: 13, to: 14 }
          ];
          // 创建节点对象
          var nodes = new DataSet(allnodes);
          // 创建连线对象
          var edges = new DataSet(alledges);
          // 创建一个网络拓扑图
          var container = document.getElementById("mynetwork");
          var data = { nodes: nodes, edges: edges };
          var options = {
            interaction: {
              hover: true,
              hoverConnectedEdges: true
            },
            // 节点样式
            nodes: {
              font: {
                color: "white", //字体的颜色
                size: 16 //显示字体大小
              },
              shape: "image",
              image: require("@/assets/images/icon.png")
            },
            //连接线的样式
            edges: {
              color: {
                color: "#43CEB1",
                highlight: "#43CEB1",
                hover: "green",
                inherit: "from",
                opacity: 1.0
              },
              font: {
                align: "top" //连接线文字位置
              }
            }
          };
          var network = new Network(container, data, options);

          var nodes_data = network.body.data.nodes._data;
          network.on("doubleClick", function(params) {
            //双击事件
            if (params.nodes.length != 0) {
              //确定为节点双击事件
              var click_node_id = params.nodes[0];
              remove_all_sub_nodes(click_node_id);
            }
          });

          //删除下级所有节点
          function remove_all_sub_nodes(node_id) {
            var sub_nodes = get_directly_sub_nodes(node_id);
            if (sub_nodes.length == 0) {
              //当前点击的为叶子节点
              //判断是否有下级节点
              if (typeof allnodes[node_id - 1]["subids"] != "undefined") {
                $.each(allnodes[node_id - 1]["subids"], function(index, item) {
                  nodes.add(allnodes[item - 1]);
                  edges.add({ id: node_id + "_" + item, from: node_id, to: item });
                });
              } else {
                ElMessage("当前为叶子节点");
              }
            } 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 });
              });
            }
          }

          //获取某节点直属下级节点
          function get_directly_sub_nodes(node_id) {
            var return_nodes = [];
            var connectedNodes = network.getConnectedNodes(node_id); //获取所有连接节点
            $.each(connectedNodes, function(index, item) {
              if (item != allnodes[node_id - 1]["pid"]) {
                //当前节点的父节点 ，不操作
                return_nodes.push(item);
              }
            });
            return return_nodes;
          }
        }
    };
    return {
      init
    };
    mounted() {
        this.init();
    }
}
</script>

参考：https://blog.csdn.net/qq_36509946/article/details/108533115