Adding sigma.js navigation buttons

Question

I'm new to javascript and sigma.js, and I'm trying to get navigation buttons to scroll up/down/left/right in the canvas, much like what is found here

So far, I have a simple example that I'm trying to get working on jsfiddle: http://jsfiddle.net/dpmartin42/kSkkG/16/

I'm using the following line of code I found on GitHub and am trying to build off of it:

$('[data-action="up"]').bind('click', function(e) {

    // With "inst" our sigma instance:
    var newPos = inst.position();

    newPos.stageY += 80;
    inst.goTo(newPos.stageX, newPos.stageY);

    e.stopPropagation();
    return false;
});

I have been messing with it for awhile and I can't seem to get it to work. Problem is, I don't really know what is going wrong. Any help is appreciated!

Answer 1

Figured it out, the code needed to be modified slightly with the new sigma release.

You define a new variable as the camera of the sigma instance, s, and then I used the goTo function for moving the graph (or zooming) as needed. See this github issue on the sigma.js website for more information

var c = s.camera;

// move right example

$(document).ready(function(){
  $(".move-right").bind("click",function(){
      c.goTo({
         x:c.x - 50, y:c.y
      });     
  });
});

// zoom in example

$(document).ready(function(){
  $(".zoom-in").bind("click",function(){
      c.goTo({
          ratio: c.ratio / c.settings('zoomingRatio')
      });
  });
});