How to resize nodes at runtime

[umpani]

This is not a real bug, but a question. Its a duplicate of this:

I would like to resize nodes of a vis.js network at runtime. My goal is to create a slidercontrol to expand all nodes (an labels) or collapse them.

At first, I tryed to manipulate the Scaling values.

var options = {nodes: {scaling: {label: {max: 180 , maxVisible: 180}}}};
network.setOptions(options); 

But there are no results.
My second idea was to manipulate the value value of every single node.

  function IncNodeSize(Increment) { 
      var CurrentNodes = nodesDS.get() ;
      for (var i = 0; i < CurrentNodes.length; i++) {
          CurrentNodes[i].value = CurrentNodes[i].value + 100;
        }
      }        
      nodesDS.update(CurrentNodes); 
    }

But this doesn't work either.

Has anyone an idea how to resize nodes at runtime?

Thx Umpani

[wimrijnders]

I would think that the scaling set of options would be workable here, surprised it isn't. Do you perhaps have an example network to try it out with?

[umpani]

Hi,

use this example Network | sizing and insert tis code by using the browser console. It change the max scaling value from 150 to 500. But nothing happens. I also tried to remove the "customScalingFunction".

      var options = {
        nodes: {
          shape: 'dot',
          scaling: {
            customScalingFunction: function (min,max,total,value) {
              return value/total;
            },
            min:5,
            max:500
          }
        }
      };
network.setOptions(options);

This one is working (changing the shape of the nodes)

      var options = {
        nodes: {
          shape: 'dot'
        }
      };
network.setOptions(options); 

[wimrijnders]

OK. so the scaling options set the extremes of the allowable scaling values. You still need to change the value fields of the nodes to change the sizes. In effect, you need to combine the two things you tried.

In the given example, change to the following:

...
      nodes = new vis.DataSet([
...
      ]);
...
      edges = new vis.DataSet([
      ]);
...

Now, find a way to scale a node. Here's a silly example:

function resize() {
  var prev = nodes.get(1);
  nodes.update({id:1, value: prev.value*1.2});
  setTimeout(resize, 1000);
}

resize();

[umpani]

Hi,

thank you very much. The combination of both is working.

Umpani

[wimrijnders]

Great! Please close the issue if you're done.