Sigma JS node animation

Question

I want to move nodes in Sigma JS on click event. Say from position x 0.7 to position x -0.7.

Is it possible to move nodes in Sigma js, and if it is, kindly guide me to achieve that.

Answer 1

Yes, it is possible. I created a jsfiddle showing how to change node position, size, and color on mouse click here:

• http://jsfiddle.net/kaliatech/P255K/

You can bind to custom "downnodes" events like this:

sigInst.bind('downnodes',onNodeDown);

The event callback contains an array of selected node ids. I don't know when it would be more than one when clicking. Perhaps when zoomed out in a complex graph.

One of the more subtle issues when using sigmajs, is that most methods, such as getNodes, return clones, not the instances themselves. This is to protect "private" data in the graph I think, especially data that can not be redrawn after initialization. To actually modify properties, you need to use the iterator methods. Even then, you are only given clones. The library updates the actual node instances using a list of predefined allowable properties. (See the checkNode function in graph.js).

After properties have been set, you then need to refresh/redraw the graph. While the "refresh" method would seem to be an obvious candidate, it did not work. I was able to get it to redraw using the draw method though. You will need to review the source code to understand the different parameters. Example:

function onNodeDown(evt) {
    var sigmajs = evt.target;
    var nodeId = evt.content[0];
    sigmajs.iterNodes(function(n){
      n.size = 10;
      n.color = "#0000FF";
    },[nodeId]);    

    sigmajs.draw(2, 2, 2, true);
};

For more advanced needs, the sigmajs website includes plugin examples showing other ways of getting mouse events and updating nodes dynamically. One is the advanced plugin example for a fisheye effect:

• http://sigmajs.org/examples/a_plugin_example_advanced.html

Another is the example for accessing node attributes:

• http://sigmajs.org/examples/more_node_info.html

The sigmajs documentation is weak, so you will need to review the source code to understand things.

Answer 2

There are plugins permitting to move isolated nodes from the graph. Check

https://github.com/Linkurious/linkurious.js/blob/develop/examples/lasso.html