Make a node double its size on mouseOver

I am having a bit of a hard time understanding how sigma.js handles the size of nodes and edges.

I get that you set a minNodeSize and maxNodesSize in the graph’s setting. Actual display size is then assigned depending on the node’s individual size as well as the level of zoom of the graph. Correct?

What I am trying to achieve is that a node doubles its size on a mouseOver, and shrinks back to the original size on a mouseOut. Here is my code:

var minNodeSize = 1;
var maxNodeSize = 5;

sigma.parsers.json('giantComponent.json', {
      container: 'graph',
      settings: {
        minNodeSize: minNodeSize,
        maxNodeSize: maxNodeSize
      }   

      //Assign same size to all nodes
      var s = sigma.instances()[0];
      var nodes = s.graph.nodes();
      nodes.forEach(function (n) {
          n.size= maxNodeSize/2;
      })
    }
    );

//Function to change a nodes size on mouseOVer
function interactiveNodes () {  
    var s = sigma.instances()[0];
    var nodes = s.graph.nodes();
    s.bind('overNode', function (d) {
        d.data.node.size = maxNodeSize;
        s.refresh();
    })
    s.bind('outNode', function (d) {
        d.data.node.size = maxNodeSize/2;
        s.refresh();
    })
    }

Result: when I hover on a node that node stays the same size while all other nodes shrink to half their size.

Any ideas?

[Yomguithereal]

Try autoRescale: ['nodePosition', 'edgeSize']. It will only rescale position and edge sizes.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.