How to add zoom in zoom out buttons in visjs using angularjs?

Question

Need help in having a zoom in and zoom out button in visjs network graph using angularjs, I could not find any relevant options for this. Please help, I am also providing a plunker link as an example

Code

<vis-network data="data" options="options" height="100%"></vis-network>

$scope.options = {
  autoResize: true,
  height: '800',
  width: '100%'
};

Answer 1

Updated solution for vis.js 4.21.0

vis.Network.prototype.zoom = function (scale) {
    const animationOptions = {
        scale: this.getScale() + scale,
        animation: { duration: 300 }
    };
    this.view.moveTo(animationOptions);
};

Click handler code:

this.network.zoom(-0.5) // or 0.5 to zoom in

Answer 2

I've never worked with plunker, so I can not integrated my solution into your example, but I've created a JSFiddle for it which is based on a simple network example from the visjs.org website.

Unfortunately there is no setScale(scale) method available right now, but you could extend the network until someone implements it.

var network;
var zoomstep = 0.3;

function zoomin() {
    network.setScale(network.getScale() - zoomstep);
}

function zoomout() {
    network.setScale(network.getScale() + zoomstep);
}

vis.Network.prototype.setScale = function (scale) {
    var options = {
        nodes: []
    };
    var range = this.view._getRange(options.nodes);
    var center = this.view._findCenter(range);
    var animationOptions = {
        position: center,
        scale: scale,
        animation: options.animation
    };
    this.view.moveTo(animationOptions);
};

The vis.Network.setScale code was taken from the Network.js and View.js source code, based on what getScale() did. I had to redo some things which the methods View.fit, View._getRange and View._findCenter did but it's working good so far.

Answer 3

Take a look at the interaction, navigationButtons option. It has built in controls for zoom, pan and reset view.

You need to change your vis options to include navigationButtons: true and keyboard: true to have keboard shortcuts enabled

$scope.options = {
  autoResize: true,
  height: '600',
  width: '100%',
  interaction: {
      navigationButtons: true,
      keyboard: true
  }
};

Check this plunker