javascript - Vis.js 不会使用 .fit() 放大到 1.0 以上

标签 javascript vis.js

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

问题出在network.fit();它不会比比例“1.0”进一步放大

我写了一个 Fiddle 来展示这个问题: 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 缩放直到网络全屏显示?

最佳答案

正如 Richard 所说 - 现在,此方法无法按预期工作。您可以使用自定义方法,作为一个概念:

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

关于javascript - Vis.js 不会使用 .fit() 放大到 1.0 以上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37795118/

相关文章:

javascript - 基于组改变物理 - visjs

javascript - 如何将网页渲染视频保存为 mp4 - Diaporama

vis.js - vis.js中节点和分层布局之间的多行

javascript - 如何在 visjs 的分层布局中使节点在 y 轴上移动?

javascript - 放大和缩小时间线时如何在时间线 Vis.js 上设置新选项?

vis.js - x轴时间轴visjs上的自定义日期

javascript - Object.assign 构造函数中的 getter 和 setter

javascript - 首次运行 Greasemonkey 脚本时执行函数

javascript - 将表单状态保存到服务器而不干扰页面

javascript - 在 Chrome 扩展程序中访问 Cookie