項目需要對節點無限層級查看，大概搗鼓了下，以下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>