Cytoscape JS 레이아웃 Loading Spinner

큰 그래프가로드되고 Cytoscape JS에 레이아웃되어있는 동안 로딩 스피너를 표시하려고합니다. 레이아웃이 완료되지 않은 경우에도로드 스피너가 사라집니다. 레이아웃 마무리를 듣고 최종 레이아웃에 도달 할 때까지 회 전자를 표시하는 방법이 있는지 궁금합니다.Cytoscape JS 레이아웃 Loading Spinner

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.14/cytoscape.js"></script> 


    <title></title> 

    <style media="screen"> 
     #cy { 
     position: absolute; 
     width:100%; 
     height:100%; 
     /*height:500px;*/ 
     z-index: 0; 
     margin-left: auto; 
     margin-right: auto; 
     } 


     #loading { 
     position: absolute; 
     background: #ffffff; 
     display: block; 
     left: 0; 
     top: 50%; 
     width: 100%; 
     text-align: center; 
     margin-top: -0.5em; 
     font-size: 2em; 
     color: #000; 
     } 

     #loading.loaded { 
     display: none; 
     } 

    </style> 
    </head> 
    <body> 

    <div id="cy"> 
    </div> 
    <div id="loading"> 
     <span class="fa fa-refresh fa-spin"></span> 
    </div> 

    <script type="text/javascript"> 

$(document).ready(function(){ 
    // Create random JSON object 
    var maximum = 500; 
    var minimum = 1; 

    function getRandNumber(){ 
     var min = 1; 
     var max = 1000; 
     var randNumber = Math.floor(Math.random() * (max - min + 1)) + min; 
     return randNumber; 
    } 

    nodes = []; 
    geneIds = []; 
    edges = []; 
    for(var i = 0; i < 2000; i++){ 
    var source = getRandNumber(); 
    var target = getRandNumber(); 
    edges.push({"data": {"id":i.toString(),"source":source.toString(),"target":target.toString()}}); 
    if ($.inArray(source, geneIds) === -1) { 
     nodes.push({"data": {"id":source.toString(),"name":source.toString()}}); 
     geneIds.push(source); 
    } 
    if ($.inArray(target, geneIds) === -1) { 
     nodes.push({"data":{"id":target.toString(),"name":target.toString()}}); 
     geneIds.push(target); 
    } 
    } 

    var networkData = {"nodes":nodes,"edges":edges}; 
    // console.log(networkData); 

///////////////// Create the network 
var coseLayoutParams = { 
    name: 'cose', 
    // padding: 10, 
    randomize: false, 
}; 


var cy = window.cy = cytoscape({ 
    container: document.getElementById('cy'), 
    // elements: networkData, 
    minZoom: 0.1, 
    // maxZoom: 10, 
    wheelSensitivity: 0.2, 
    style: [ 
     { 
     selector: 'node', 
     style: { 
      'content': 'data(name)', 
      'text-valign': 'center', 
      'text-halign': 'center', 
      'font-size': 8 
     } 
     }], 
     layout: coseLayoutParams 
}); 


cy.add(networkData); 
var layout = cy.makeLayout(coseLayoutParams); 
layout.run(); 
$("#loading").addClass("loaded"); 

}); 
    </script> 
    </body> 
</html>

출처

2017-01-19 Peter Pisher

당신은 해고 될 'layoutstop' 이벤트를 대기하는 레이아웃 객체에 리스너를 추가 할 수 있습니다 : 여기 http://js.cytoscape.org/#layout.on

과 :

layout.on('layoutstop', function() { 
//... unload spinner here 
});

은 여기에서 볼 https://github.com/cytoscape/cytoscape.js/blob/master/documentation/md/events.md

또는, 레이아웃 옵션에서 콜백 함수를 지정할 수 있습니다 (예 :

0123).

var coseLayoutParams = { 
    name: 'cose', 
    // padding: 10, 
    randomize: false, 

    // Called on `layoutstop` 
    stop: function() { 
    //... unload spinner here 
    }, 
};

여기를 참조하십시오 : http://js.cytoscape.org/#layouts/cose

출처

2017-01-20 09:59:26 BeerBaron

답변

관련 문제