2016-06-13 8 views
2

私はライブラリVis.jsを使ってネットワークを表示しています。 私のアプリケーションでは、ネットワークがフルスクリーンで表示される必要があり、ノードはコンテナの境界にほとんど触れています。Vis.jsは.fit()を使ってスケール1.0以上に拡大しません。

問題は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 

ネットワークがフルスクリーンになるまで、どのようにしてズームするヴィスを強制することができますか?

答えて

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

うわー、あなたのソリューションは、鉱山、良い仕事よりもずっといいです! – 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; 
} 
関連する問題