Cytoscape JS Layout Laden Spinner

Ich möchte eine Lade Spinner anzeigen, während eine riesige Grafik geladen und in Cytoscape JS layouted ist. Der Lade-Spinner verschwindet jedoch, obwohl das Layout nicht fertig ist. Ich frage mich, ob es eine Möglichkeit gibt, ein Layout zu hören und den Spinner zu zeigen, bis das endgültige Layout erreicht ist.Cytoscape JS Layout Laden 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>

Quelle

2017-01-19 Peter Pisher

Sie können einen Zuhörer zu Ihrem Layout Objekt hinzufügen, das für 'layoutstop' Ereignis wartet abgefeuert werden:

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

siehe hier: http://js.cytoscape.org/#layout.on

und hier: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/md/events.md

oder, Sie können eine Callback-Funktion in Layout-Optionen angeben, z. B.

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

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

siehe hier: http://js.cytoscape.org/#layouts/cose

Quelle

2017-01-20 09:59:26 BeerBaron

Cytoscape JS Layout Laden Spinner

Antwort

Verwandte Themen