CODEWITHSUNDEEP
javascriptsigma.js
Fede9390
Fede9390

Reputation: 349

Make a node double its size on mouse over in sgma.js

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?

Upvotes: 0

Views: 738

Answers (1)

alfredopacino
alfredopacino

Reputation: 3241

I think you're asking for the autoRescale option. https://github.com/jacomyal/sigma.js/wiki/Settings#global-settings

Upvotes: 1

Related Questions