Make a node double its size on mouseOver

[Federicopvs]

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]

This is due to the autoRescale settings which scale every dimensions to be relative to each other in order to avoid strange things. But, in your case, this is hindering you. Try disabling it or tweak it not to affect sizes and tell me if this works.

[Federicopvs]

setting autoRescale : false does work indeed! However, my starting graph is much smaller (it got zoomed out) and I am not sure how to change that.
I am looking at the camera API documentation but not finding much about zoom levels.

[Yomguithereal]

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

[Federicopvs]

Yes that did the trick!! Thank you!
However, refreshing the all graphs makes the the all animation quite laggy. I tried to use refresh() only on the node whose size needs to change:

s.bind('overNode', function (d) { d.data.node.size = maxNodeSize; d.data.node.refresh();})

But that does not work.
Any idea how I can achieve a smoother animation?

[stale]

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.