Javascript Cytoscape JS布局加载微调器_Javascript_Font Awesome_Cytoscape.js

Javascript Cytoscape JS布局加载微调器

javascript

Javascript Cytoscape JS布局加载微调器,javascript,font-awesome,cytoscape.js,Javascript,Font Awesome,Cytoscape.js,我想在Cytoscape JS中加载和布局一个巨大的图形时显示一个加载微调器。但即使布局尚未完成，加载微调器也会消失。我想知道是否有一种方法可以听到布局完成并显示微调器，直到达到最终布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font

我想在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>


#赛义德{
位置：绝对位置；
宽度：100%；
身高：100%；
/*高度：500px*/
z指数：0；
左边距：自动；
右边距：自动；
}
#装载{
位置：绝对位置；
背景：#ffffff；
显示：块；
左：0；
最高：50%；
宽度：100%；
文本对齐：居中；
边缘顶部：-0.5em；
字号：2em；
颜色：#000；
}
#加载{
显示：无；
}
$（文档）.ready（函数（）{
//创建随机JSON对象
var最大值=500；
var最小值=1；
函数getRandNumber（）{
var min=1；
var max=1000；
var randNumber=Math.floor（Math.random（）*（max-min+1））+min；
返回号码；
}
节点=[]；
GeneID=[]；
边=[]；
对于（变量i=0；i<2000；i++）{
var source=getRandNumber（）；
var target=getRandNumber（）；
push（{“数据”：{“id”：i.toString（），“source”：source.toString（），“target”：target.toString（）}）；
if（$.inArray（源，geneIds）=-1）{
push（{“data”：{“id”：source.toString（），“name”：source.toString（）}）；
geneIds.push（源代码）；
}
if（$.inArray（目标，geneIds）=-1）{
push（{“data”：{“id”：target.toString（），“name”：target.toString（）}）；
geneIds.push（目标）；
}
}
var networkData={“节点”：节点，“边”：边}；
//console.log（networkData）；
/////////////////创建网络
var coseLayoutParams={
名称：“cose”，
//填充：10，
随机化：错误，
};
var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
//元素：网络数据，
最小缩放：0.1，
//最大缩放：10，
车轮灵敏度：0.2，
风格：[
{
选择器：'节点'，
风格：{
“内容”：“数据（名称）”，
“text valign”：“center”，
“text halign”：“center”，
“字体大小”：8
}
}],
布局：coseLayoutParams
});
cy.add（网络数据）；
var layout=cy.makeLayout（coseLayoutParams）；
layout.run（）；
$（“#加载”）.addClass（“加载”）；
});

您可以在布局对象中添加一个侦听器，等待触发

'layoutstop'

事件：

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

请看这里：

在这里：

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

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

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

请看这里：