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%'
};
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 thenetwork
until someone implements it.The
vis.Network.setScale
code was taken from the Network.js and View.js source code, based on whatgetScale()
did. I had to redo some things which the methodsView.fit
,View._getRange
andView._findCenter
did but it's working good so far.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
andkeyboard: true
to have keboard shortcuts enabledCheck this plunker
Updated solution for vis.js 4.21.0
Click handler code: