Question

我想显示一个加载微调器，同时加载一个巨大的图形并在Cytoscape JS中进行布局。但即使布局没有完成，加载微调器也会消失。我想知道是否有办法听取布局完成并显示微调器直到达到最终布局？

<!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>

Answer 1

您可以向布局对象添加一个等待'layoutstop'事件被触发的侦听器：

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

见这里：http://js.cytoscape.org/#layout.on

在这里：https://github.com/cytoscape/cytoscape.js/blob/master/documentation/md/events.md

或者，您可以在布局选项中指定回调函数，例如

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

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

见这里：http://js.cytoscape.org/#layouts/cose

Cytoscape JS布局加载微调器

1 个答案: