How to limit zooming of a vis.js network?

Question

I've implemented a simple network using vis.js. Here's my code:

//create an array of nodes
var nodes = [
    {
        id: "1",
        label: "item1"
    },
    {
        id: "2",
        label: "item2"
    },
    {
        id: "3",
        label: "item3"
    },
];

// create an array with edges
var edges = [
    {
        from: "1",
        to: "2",
        label: "relation-1",
        arrows: "from"
    },
    {
        from: "1",
        to: "3",
        label: "relation-2",
        arrows: "to"
    },
];

// create a network
var container = document.getElementById('mynetwork');

// provide the data in the vis format
var data = {
    nodes: nodes,
    edges: edges
};
var options = {};

// initialize your network!
var network = new vis.Network(container, data, options);

On performing the zoom-out operation multiple times the network disappears. Are there any functions to limit the zooming level?

Manzoni

If totallytypicalcow's answer helps (and it looks like it solves your issue), don't forget to accept it by clicking the tick symbol on the left. Best regards – Regazzi

Answer 1

I wrote you some code to get this function working since there is no zoomMax function within the network of vis.js, I wrote some basic logic to help you out.

var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var afterzoomlimit = { //here we are setting the zoom limit to move to 
    scale: 0.49,
}

var options = {}; 

var network = new vis.Network(container, data, options);
network.on("zoom",function(){ //while zooming 
    if(network.getScale() <= 0.49 )//the limit you want to stop at
    {
        network.moveTo(afterzoomlimit); //set this limit so it stops zooming out here
    } 
});

Here is a jsfiddle: https://jsfiddle.net/styb8u9o/

Hope this helps you.

Pinkard

Answer 2

Here is a version that preserves the last position, to prevent an annoying jump or slow pan when you get to the maximum extent.

let MIN_ZOOM = 0.5
let MAX_ZOOM = 2.0
let lastZoomPosition = {x:0, y:0}
network.on("zoom",function(params){
    let scale = network.getScale()
    if(scale <= MIN_ZOOM )
    {
        network.moveTo({
            position: lastZoomPosition,
            scale: MIN_ZOOM
        });
    }
    else if(scale >= MAX_ZOOM ){
        network.moveTo({
            position: lastZoomPosition,
            scale: MAX_ZOOM,
       });
     }
     else{
        lastZoomPosition = network.getViewPosition()
     }
});
network.on("dragEnd",function(params){
    lastZoomPosition = network.getViewPosition()
});

Still, it will be redundant once the following issue is resolved: https://github.com/visjs/vis-network/issues/574

Dimercaprol

Thanks @Dimercaprol ! Tested on vis-network-9.1.2. This is the only solution that does not produce jitter or panning when reaching zoom limit. IMO this should be the accepted solution. – Fusillade

Answer 3

You can use this code is better because you will never go to the middle of the network when you reach the zoom limit:

//NetWork on Zoom
network.on("zoom",function(){
   pos = [];
   pos = network.getViewPosition();

   if(network.getScale() <= 0.49 )
   {

    network.moveTo({
        position: {x:pos.x, y:pos.y},
        scale: 0.49,
      });
   }
   if(network.getScale() >= 2.00 ){

        network.moveTo({
        position: {x:pos.x, y:pos.y},
        scale: 2.00,
      });
    }
  });

Agace