为什么当我尝试更新任何节点时 Visjs 网络重新出现

Question

I am trying to update the hidden attribute of visjs network's node. by clicking the node, the node should be invisible without disturbing the graph. can anyone help me with this I am new. code I am trying -

this.network.on('click', function (properties) {
      var ids = properties.nodes;
      if(ids.length==0)
        return
   
      treeData.nodes.update({id:ids,hidden:true}) //treeData is object containing two dataSets (nodes and edges);
      
    });

Answer 1

The object generated by the click event contains an array of IDs rather than a single ID. The definition of this can be seen at https://visjs.github.io/vis-network/docs/network/#Events .

At present the code is passing this array in as a single id treeData.nodes.update({id:ids,hidden:true}) which generates an error "Error: Node must have an id" . Instead of this it should loop through the array of IDs updating each.

network.on('click', function (properties) {
  var ids = properties.nodes;

  // ids is an array, update each item
  for (let i = 0; i < ids.length; i++){
    treeData.nodes.update({id:ids[i],hidden:true})
    }      
});

Example can be found at https://jsfiddle.net/3yshgam1/ and also incorporated into this post below.

 // create an array with nodes var nodes = new vis.DataSet([ { id: 1, label: "Node 1" }, { id: 2, label: "Node 2" }, { id: 3, label: "Node 3" }, { id: 4, label: "Node 4" }, { id: 5, label: "Node 5" }, ]); // create an array with edges var edges = new vis.DataSet([ { from: 1, to: 3 }, { from: 1, to: 2 }, { from: 2, to: 4 }, { from: 2, to: 5 }, { from: 3, to: 3 }, ]); // create a network var container = document.getElementById("mynetwork"); var treeData = { nodes: nodes, edges: edges, }; var options = {}; var network = new vis.Network(container, treeData, options); network.on('click', function (properties) { var ids = properties.nodes; // ids is an array, loop through the items for (let i = 0; i < ids.length; i++){ treeData.nodes.update({id:ids[i],hidden:true}) } });

 #mynetwork { width: 600px; height: 180px; border: 1px solid lightgray; }

 <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script> <div id="mynetwork"></div>

Full example: