项目需要对节点无限层级查看，大概捣鼓了下，以下demo代码可根据节点的层级顺序，通过节点双击简单实现节点的折叠与展开
<!doctype html> <html> <head> <title>Network</title> <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script> <link href="http://visjs.org/dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script> <style type="text/css"> #mynetwork { width: 600px; height: 400px; border: 1px solid lightgray; } </style> </head> <body> <p> 创建一个简单的网络拓扑图，双击实现节点的折叠与收缩. </p> <div id="mynetwork"></div><!-- 用户存放拓扑图的容器--> <script type="text/javascript"> //定义需要生成的节点 var allnodes = [ {id: 1, label: \'Node 1\', title: \'I have a popup 1!\', level: 1, pid: 0, subids: [2, 3, 4]}, {id: 2, label: \'Node 2\', title: \'I have a popup 2!\', level: 2, pid: 1, subids: [5, 6]}, {id: 3, label: \'Node 3\', title: \'I have a popup 3!\', level: 2, pid: 1, subids: [7]}, {id: 4, label: \'Node 4\', title: \'I have a popup 4!\', level: 2, pid: 1, subids: [8]}, {id: 5, label: \'Node 5\', title: \'I have a popup 5!\', level: 3, pid: 2}, {id: 6, label: \'Node 6\', title: \'I have a popup 6!\', level: 3, pid: 2}, {id: 7, label: \'Node 7\', title: \'I have a popup 7!\', level: 3, pid: 3}, {id: 8, label: \'Node 8\', title: \'I have a popup 8!\', level: 3, pid: 4, subids: [9, 10]}, {id: 9, label: \'Node 9\', title: \'I have a popup 9!\', level: 4, pid: 8}, {id: 10, label: \'Node 10\', title: \'I have a popup 10!\', level: 4, pid: 8} ]; //定义节点连接线 var alledges = [ {id: \'1_2\', from: 1, to: 2, title: \'test12!\'}, {id: \'1_3\', from: 1, to: 3, title: \'test13!\'}, {id: \'1_4\', from: 1, to: 4, title: \'test14!\'}, {id: \'2_5\', from: 2, to: 5, title: \'test25!\'}, {id: \'2_6\', from: 2, to: 6, title: \'test26!\'}, {id: \'3_7\', from: 3, to: 7, title: \'test37!\'}, {id: \'4_8\', from: 4, to: 8, title: \'test48!\'}, {id: \'8_9\', from: 8, to: 9, title: \'test89!\'}, {id: \'8_10\', from: 8, to: 10, title: \'test8to10!\'} ]; // 创建节点对象 var nodes = new vis.DataSet(allnodes); // 创建连线对象 var edges = new vis.DataSet(alledges); // 创建一个网络拓扑图 var container = document.getElementById(\'mynetwork\'); var data = {nodes: nodes, edges: edges}; var options = { interaction: {hover: true}, layout: { hierarchical: {direction: \'UD\', sortMethod: \'hubsize\'} //上下级结构显示,当定义上下级时候需要自定义层级显示时，需要对所有节点进行level属性进行定义 }, }; var network = new vis.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 { 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}); }); } } //获取某节点直属下级节点 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; } </script> </body> </html>