javascript - Vis.js tidak akan memperbesar lebih dari skala 1.0 dengan .fit()

Saya menggunakan pustaka Vis.js untuk menampilkan sebuah Jaringan. Untuk aplikasi saya, saya perlu jaringan ditampilkan secara layar penuh, dengan simpul hampir menyentuh batas-batas kontainernya.

Masalah berasal dari network.fit(); itu tidak akan memperbesar lebih dari skala '1.0'

Saya menulis sebuah Fiddle untuk menunjukkan masalahnya: 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

Bagaimana saya bisa memaksa Vis untuk memperbesar sampai jaringan memenuhi layar penuh?

Jawaban #1

Seperti yang dikatakan Richard - sekarang, metode ini tidak bekerja seperti yang diharapkan. Anda dapat menggunakan metode kustom, sebagai sebuah konsep:

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

Jawaban #2

Maaf, tidak mungkin melakukan ini menggunakan network.fit. Berikut adalah kode yang relevan.

Namun, Anda bisa memperbaikinya sendiri dan menyertakan versi yang dimodifikasi ke dalam aplikasi Anda yang kemudian seharusnya bekerja seperti yang diharapkan. Berikut adalah sebuah fiddle (baris 38337 untuk modifikasi). Namun, saya tidak bisa menjamin itu tidak akan merusak hal lain.

Kode yang relevan :

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