2
巨大なグラフが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>