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

admin管理员组

文章数量:1024657

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 es from network.fit(); it won't Zoom-In further than scale '1.0'

I wrote a Fiddle to showcase the issue: /

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?

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 es from network.fit(); it won't Zoom-In further than scale '1.0'

I wrote a Fiddle to showcase the issue: http://jsfiddle/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?

• javascript
• vis.js

Share Improve this question Follow edited Jun 13, 2016 at 18:53 Guillaume F. asked Jun 13, 2016 at 16:47 Guillaume F.Guillaume F. 6,51322 gold badges3535 silver badges6262 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/dv4qyeoL/ ]

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

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 es from network.fit(); it won't Zoom-In further than scale '1.0'

I wrote a Fiddle to showcase the issue: /

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?

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 es from network.fit(); it won't Zoom-In further than scale '1.0'

I wrote a Fiddle to showcase the issue: http://jsfiddle/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?

• javascript
• vis.js

Share Improve this question Follow edited Jun 13, 2016 at 18:53 Guillaume F. asked Jun 13, 2016 at 16:47 Guillaume F.Guillaume F. 6,51322 gold badges3535 silver badges6262 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/dv4qyeoL/ ]

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

本文标签： javascriptVisjs won39t zoomin further than scale 10 with fit()Stack Overflow