2016-06-13 2 views
2

Я использую библиотеку Vis.js для отображения сети. Для моего приложения мне нужно, чтобы сеть отображалась в полноэкранном режиме, узлы почти касались границ ее контейнера.Vis.js не будет увеличивать масштаб, чем масштаб 1.0 с .fit()

Проблема возникает из network.fit(); он не будет штобы дальше, чем масштаб «1.0»

я написал скрипку, чтобы продемонстрировать вопрос: 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, чтобы увеличить, пока сеть не будет весь экран?

ответ

2

Как сказал Ричард - теперь, этот метод не работает, как ожидалось. Вы можете использовать собственный метод, как понятие:

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

+0

Wow, ваше решение лучше, чем у меня, хорошая работа! – Richard

1

Извините, но это невозможно, используя 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; 
} 
Смежные вопросы