javascript - How to add zoom in zoom out buttons in visjs using angularjs? - Stack Overflow

admin管理员组

文章数量:1345054

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%'
};

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%'
};

• javascript
• angularjs
• angularjs-directive
• vis.js
• vis.js-network

Share Improve this question Follow edited Mar 4, 2018 at 23:23 YakovL 8,3851313 gold badges7373 silver badges113113 bronze badges asked Jun 26, 2015 at 16:42 user801116user801116 3

• You can zoom in and out with the scroll wheel -- why do you need separate buttons to do this? – efeder Commented Jun 30, 2015 at 13:51
• @efeder: All users might not have a mouse with scrolls, also some might be using laptops where user might prefer some controls over this graph. Take a look at this visjs example – user801116 Commented Jul 1, 2015 at 4:55
• I have provided a solution similar to http://tiddlymap/ example – AabinGunz Commented Jul 2, 2015 at 6:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

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

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 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.

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:

thiswork.zoom(-0.5) // or 0.5 to zoom in

本文标签： javascriptHow to add zoom in zoom out buttons in visjs using angularjsStack Overflow