Vis.js won't zoom-in further than scale 1.0 with .fit()

Question

I am using the library Vis.js to display a Network. For my application, I need the network to be displayed fullscreen, with the nodes almost touching the borders of its container.

The problem comes from network.fit(); it won't Zoom-In further than scale '1.0'

I wrote a Fiddle to showcase the issue: http://jsfiddle.net/v1467x1d/12/

var nodeSet = [
    {id:1,label:'big'},
    {id:2,label:'big too'} ];

var edgeSet = [ 
    {from:1, to:2} ];

var nodes = new vis.DataSet(nodeSet);
var edges = new vis.DataSet(edgeSet);

var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {};

var network = new vis.Network(container, data, options);
network.fit();
console.log( 'scale: '+ network.getScale() ); // Always 1

How can I force Vis to zoom until the network is fullscreen?

Doable

Answer 1

As Richard said - now, this method does not work as expected. You can use a custom method, as a concept:

function bestFit() {

  network.moveTo({scale:1}); 
  network.stopSimulation();
   
  var bigBB = { top: Infinity, left: Infinity, right: -Infinity, bottom: -Infinity }
  nodes.getIds().forEach( function(i) {
    var bb = network.getBoundingBox(i);
    if (bb.top < bigBB.top) bigBB.top = bb.top;
    if (bb.left < bigBB.left) bigBB.left = bb.left;
    if (bb.right > bigBB.right) bigBB.right = bb.right;
    if (bb.bottom > bigBB.bottom) bigBB.bottom = bb.bottom;  
  })
  
  var canvasWidth = network.canvas.body.container.clientWidth;
  var canvasHeight = network.canvas.body.container.clientHeight; 

  var scaleX = canvasWidth/(bigBB.right - bigBB.left);
  var scaleY = canvasHeight/(bigBB.bottom - bigBB.top);
  var scale = scaleX;
  if (scale * (bigBB.bottom - bigBB.top) > canvasHeight ) scale = scaleY;

  if (scale>1) scale = 0.9*scale;
 
  network.moveTo({
    scale: scale,
    position: {
        x: (bigBB.right + bigBB.left)/2,
      y: (bigBB.bottom + bigBB.top)/2
    }
  })
  
}

[ http://jsfiddle.net/dv4qyeoL/ ]

Megan

Saved my life... then brought me to despair when some networks got cut on top and bottom with no apprent cause. Untill I found the bug, which re-saved my life for the second time in one day :-) Do you agree with following edit: if (scale * (bigBB.bottom - bigBB.top) > canvasHeight ) scale = scaleY; ? – Furniture

Answer 2

I am sorry it is impossible to do this using network.fit. Here is the relevant code.

However, you can patch it yourself and include the modified version into your application which should then work as expected. Here is a fiddle (line 38337 for the modification). I can't promise it won't break something else though.

Relevant code :

/*if (zoomLevel > 1.0) {
  zoomLevel = 1.0;
} else if (zoomLevel === 0) {
  zoomLevel = 1.0;
}*/
if (zoomLevel === 0) {
  zoomLevel = 1.0;
}

Affray