使用.fit（）

Question

我正在使用库Vis.js来显示网络。 对于我的应用程序，我需要全屏显示网络，节点几乎触及其容器的边框。

问题来自network.fit（）;它不会扩展到比规模1.0＆＃39;

我写了一个小提琴来展示这个问题： 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

在网络全屏之前，如何强制Vis进行缩放？

Answer 1

正如理查德所说 - 现在，这种方法不能按预期工作。您可以使用自定义方法作为概念：

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) > canvasWidth ) 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/dsyo47zd/]

Answer 2

很抱歉，使用network.fit无法做到这一点。这是相关的code。

但是，您可以自己修补它，并将修改后的版本包含在您的应用程序中，然后应该按预期工作。 这是一个fiddle（修改后的第38337行）。我不能保证它不会破坏别的东西。

相关代码：

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