2017-03-21 14 views
1

vis.js 라이브러리를 사용하여 네트워크 토폴로지를 만듭니다.vis js 네트워크의 기본 배율을 설정하십시오.

network = new vis.Network(container, data, options); 

용기가 나는 그림입니다되는 canvas입니다 : 내가 사용하여 네트워크를 만든 후.

데이터 :

{ 
    nodes: Nodes, 
    edges: Edges 
}; 

옵션 :이 기본 스케일을 그려 후

{ 
    autoResize: true, 
    nodes: { 
     shape: 'image', 
     size: 25, 
     font: { 
      size: 16, 
      color: 'darkbrown' 
     }, 
     borderWidth: 0, 
     shadow: true 
    }, 
    edges: { 
     smooth: { 
      forceDirection: "none" 
     } 
    }, 
    physics: { 
     forceAtlas2Based: { 
      springLength: 80, 
      springConstant: 0.27 
     }, 
     minVelocity: 0.75, 
     solver: "forceAtlas2Based", 
     timestep: 0.34 
    }, 
    layout: { 
     randomSeed: undefined 
    }, 
    interaction: { 
     hover: true 
    } 
} 

(1) 내 캔버스에 대한 매우 큽니다. 규모의 크기를 조정하고 싶습니다. 나는이 방법을 시도했다 :

network = new vis.Network(container, data, options); //network is drawn 

var scaleOption = { scale : 0.5 }; -(1) 

network.moveTo(scaleOption); -(2) 

그것은 이런 식으로 작동하지 않는다. 그러나 (1)과 (2)가 특정 이벤트 내에서 발사된다면 :

network.on("click",function(params) { 

    var scaleOption = { scale : 0.5 }; 
    network.moveTo(scaleOption); 
}); 

이 작동합니다. 처음에는 규모를 설정해야합니다. 즉, 토폴로지가 그려지는 직후 (그러한 이벤트가 발생하기 전에)를 설정해야합니다. AfterDrawing 토폴로지를 그린 후에도 이벤트가 계속 발생하므로 실패하게됩니다. 이 문제를 해결할 수있는 방법은 없나요?

답변

2

네트워크를 처음으로 축소하여 stabilized 이벤트와 once 메서드를 사용하여 네트워크의 크기를 줄입니다.

network.once('stabilized', function() { 
    var scaleOption = { scale : 0.5 }; 
    network.moveTo(scaleOption); 
}) 
+1

network.once ('startStabilizing'함수() { VAR의 스케일 scaleOption = {0.8} network.moveTo (scaleOption) }); 이 기능은 저에게 가장 잘 맞았습니다. –