visjs使用小记-3.简单网络拓扑图的折叠与展开

来源：互联网发布：淘宝商城孕妇装秋装编辑：程序博客网时间：2024/06/04 22:05
项目需要对节点无限层级查看，大概捣鼓了下，以下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>
阅读全文
1 0