微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

删除cytoscape.js中第一个节点的可折叠功能

如何解决删除cytoscape.js中第一个节点的可折叠功能

我是cytoscape.js的初学者,我想使用此代码

document.addEventListener('DOMContentLoaded',function() {
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),ready: function() {
      var api = this.expandCollapse({
        layoutBy: {
          name: "cose-bilkent",animate: "end",randomize: false,fit: true               // set this to true
        },fisheye: true,animate: false,undoable: false
      });
      api.collapseAll();
    },style: [{
      selector: 'node',style: {
        'label': 'data(id)'
      }
    }],elements: [
        {
      "group": "nodes","data": {
        "id": "n_0","name": "External Network"
      }
    },{
      "group": "nodes","data": {
        "id": "n_4","name": "虚拟机网络","parent": "group1"
      }
    },"data": {
        "id": "n_3","name": "VM Network 2","parent": "group2"
      }
    },"data": {
        "id": "v_128","name": "bfcui-pc","parent": "group0"
      }
    },"data": {
        "id": "v_105","name": "bychen-pc","data": {
        "id": "v_93","name": "CE-bj","data": {
        "id": "v_100","name": "changliu-pc","data": {
        "id": "v_67","name": "chaoma-pc","data": {
        "id": "v_83","name": "chenwang","data": {
        "id": "v_68","name": "cwang-pc","data": {
        "id": "v_15","name": "gqpei-bj","data": {
        "id": "v_1","name": "gwxu-pc","data": {
        "id": "v_118","name": "gyzhao-pc","data": {
        "id": "v_76","name": "hlli-pc","data": {
        "id": "v_18","name": "hwzhang-pc","data": {
        "id": "v_40","name": "hxqu-pc"
      }
    },"data": {
        "id": "v_69","name": "hxwang-pc","data": {
        "id": "v_71","name": "jbshi-pc","data": {
        "id": "v_64","name": "jdai-pc","data": {
        "id": "v_16","name": "jfxiao-bj","data": {
        "id": "v_78","name": "jhhou-pc","data": {
        "id": "v_91","name": "jjsun-pc","data": {
        "id": "v_17","name": "jppan-bj","data": {
        "id": "v_45","name": "jqwang-pc","data": {
        "id": "v_50","name": "jxli-pc","data": {
        "id": "v_42","name": "jyyou-pc","data": {
        "id": "v_28","name": "jyzhou-pc","data": {
        "id": "v_46","name": "jzhao-pc","data": {
        "id": "v_19","name": "lfeng-pc","data": {
        "id": "v_65","name": "lhzhen-pc",{
      "data": {
        "group": "edges","id": "n_0v_1","source": "n_0","target": "v_1"
      }
    },"id": "n_0v_100","target": "v_100"
      }
    },"id": "n_0v_46","target": "v_46"
      }
    },"id": "n_0v_64","target": "v_64"
      }
    },"id": "n_0v_65","target": "v_65"
      }
    },"id": "n_0v_67","target": "v_67"
      }
    },"id": "n_0v_69","target": "v_69"
      }
    },"id": "n_0v_71","target": "v_71"
      }
    },"id": "n_0v_76","target": "v_76"
      }
    },"id": "n_0v_78","target": "v_78"
      }
    },"id": "n_0v_83","target": "v_83"
      }
    },"id": "n_0v_91","target": "v_91"
      }
    },"id": "v_1n_0","source": "v_1","target": "n_0"
      }
    },"id": "v_1v_128","target": "v_128"
      }
    },"id": "v_100n_0","source": "v_100","id": "v_118v_16","source": "v_118","target": "v_16"
      }
    },"id": "v_118v_18","target": "v_18"
      }
    },"id": "v_118v_46","id": "v_118v_67","id": "v_118v_69","id": "v_118v_71","id": "v_118v_78","id": "v_128n_0","source": "v_128","id": "v_128v_1","id": "v_128v_105","target": "v_105"
      }
    },"id": "v_128v_46","id": "v_128v_65","id": "v_15n_0","source": "v_15","id": "v_50v_40","source": "v_50","target": "v_40"
      }
    },"id": "v_50v_46","id": "v_50v_64","id": "v_65v_19","source": "v_65","target": "v_19"
      }
    },"id": "v_65v_91","id": "v_67n_0","source": "v_67","id": "v_67v_100","id": "v_67v_105","id": "v_67v_42","target": "v_42"
      }
    },"id": "v_91v_16","source": "v_91","id": "v_91v_18","id": "v_91v_28","target": "v_28"
      }
    },"id": "v_91v_45","target": "v_45"
      }
    },"data": {
        "id": "group0"
      }
    },"data": {
        "id": "group1"
      }
    },"data": {
        "id": "group2"
      }
    }]
  });
  var api = cy.expandCollapse('get');
  var beforeExpand = null;
cy.unbind('expandcollapse.beforeexpand');
cy.nodes().bind('expandcollapse.beforeexpand',function(event) { 
   if (beforeExpand == null) 
      beforeExpand = cy.elements().clone();  // save the graph before the first expand
}); // Triggered before a node is expanded

cy.unbind('expandcollapse.aftercollapse');
cy.nodes().bind('expandcollapse.aftercollapse',function(event) { 
   if(beforeExpand != null) {
       cy.elements().remove();
       cy.add(beforeExpand);  // set the graph to original values
       beforeExpand = null;
   }
}); 
});
body {
  font-family: helvetica;
  font-size: 14px;
}
#cy { /*change your css*/
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}
h1 {
  opacity: 0.5;
  font-size: 1em;
}
<div id="cy"></div>
    <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://unpkg.com/cytoscape@3.1.0/dist/cytoscape.min.js"></script>
    <script src="https://unpkg.com/cytoscape-cose-bilkent@4.0.0/cytoscape-cose-bilkent.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape.js-undo-redo@1.0.1/cytoscape-undo-redo.js"></script>
    <script src="https://unpkg.com/cytoscape-expand-collapse@3.1.1/cytoscape-expand-collapse.js"></script>

对于可折叠图,但是问题是当第一个节点第一次扩展可以,但是第二次第一个节点单击时,无法再次扩展。 此图片首先展开

pic

,然后展开

expand

并且第一个单击的节点无法再次展开

enter image description here

谢谢您的帮助

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。