javascript - Cytoscape JS 布局加载微调器-6ren

javascript - Cytoscape JS 布局加载微调器

转载作者：行者123 更新时间：2023-11-29 21:11:18

25

4

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

最佳答案

您可以向您的布局对象添加一个监听器，等待触发 '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

关于javascript - Cytoscape JS 布局加载微调器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41745786/

25

4

0

文章推荐： android - Android 中 getTextView 的 NullPointerException

文章推荐： mysql - 复杂派生表的 SUM

文章推荐： android - 从当前时区转换为 UTC 减量 2 小时而不是 1 小时

文章推荐： php - 更新查询以反射(reflect)规范化数据库

Mysql - 微调 HAVING
有没有人对如何解决这个查询有任何想法？有一张客户表和一张许可证表。每个客户可以有多个在不同时间到期的许可证，一些已经过期，一些还没有。如果我想选择至少拥有一个有效许可证的所有客户，我会这样做: SE
tensorflow - 微调 Blenderbot
我一直在尝试微调 HuggingFace: Blendebot 的对话模型。我已经尝试过拥抱脸官方网站上给出的常规方法，它要求我们使用 trainer.train() 方法来完成。我也尝试过使用 .c
Javascript 微调 + 查找名称的精确匹配
是否有内置的 JavaScript 字符串方法可以帮助我微调这段代码以确保它只找到与名称完全匹配的内容？这是我的代码。 /*jshint multistr:true */ var text = "S
python - Wor2vec 微调
我需要微调我的 word2vec 模型。我有两个数据集，data1 和 data2。到目前为止我所做的是: model = gensim.models.Word2Vec( data1
iOS UIScrollView 微调
在苹果的应用程序中，我注意到滚动效果非常完美。一切都进展顺利，当你停下来时，它就停止了。您可以拥有一个巨大的图像并直接移动到任何位置，并且它会停留在那里。我想提供相同的 UE，但对于我的应用程序，如
tensorflow - Huggingface 微调——如何在预训练的基础上构建自定义模型
问题请帮助理解以下问题的原因以及如何构建 Keras 模型以在 huggingface 的预训练模型之上进行微调。目标在 TFDistilBertForSequenceClassificatio
r - 微调 R 的点阵包中的点图
我正在尝试为不同的数据集和不同的算法绘制一堆 ROC 区域。我有三个变量:“Scheme”指定使用的算法，“Dataset”是测试算法的数据集，以及“Area_under_ROC”。我在 R 中使
tensorflow - 微调 Keras 模型
我正在使用 CNN 进行面部表情识别。我使用 Keras 和 Tensorflow 作为后端。我的模型保存为 h5 格式。我想重新训练我的网络，并使用 VGG 模型微调我的模型。我如何使用 ker
cocoa - 微调 NSTextField 自动完成
我正在使用 NSControlTextEditingDelegate 自动完成内容在 NSSearchField 中输入我生成的自定义建议。complete: 消息发送到字段编辑器当文本更改时。现在
python - 微调 mnist 深度自动编码器模型
我为 mnist 数据集开发了一个 3 层深度自动编码器模型，因为我只是这个微调范例的初学者，所以我正在练习这个玩具数据集下面是代码 from keras import layers from k
c++ - 微调 == 运算符以匹配 double
在我的代码中有一个我正在计算的参数。在多次测试中，该参数应该为0。由于该参数是通过多次加减计算的，因此不完全为0，而是小于10^-10。目前我正在使用: double tol = pow(10,-10
android - 微调 onitemclicklistener 不工作
我的应用程序中有一个微调器，但在单击某个项目时它不起作用。我得到了值，但 if 条件不起作用。 spinner.setOnItemSelectedListener(new AdapterView.On
mysql - 微调 MySQL 服务器配置以获得更好的性能
我需要帮助调整我的 mysql 服务器以获得更好的性能。我有很多资源，但它仍然表现不佳。我打得最多的一张表只有350万条记录。我需要帮助关注更改哪些设置以获得更好的性能。像这样的简单查询 SELE
python - Keras VGG16 微调
在keras blog上有一个VGG16微调的例子，但我无法重现它。更准确地说，这里是用于在没有顶层的情况下初始化 VGG16 并卡住除最顶层以外的所有 block 的代码: WEIGHTS_PAT
android - 微调 Activity 不工作
我正在尝试创建一个 Activity RateCardActivity，其中有一个微调器。 RateCardActivity 的布局文件是 rate_card。我的 RateCardActivity
android - 微调 View ；选择器不工作
微调器 xml: 我试过使用 android:background=... 自己购买，使用 dropDownSelector，使用和不使用 listSelector=...; 使用和不使用 list
用于列出组成员的 Windows PowerShell 命令 - 微调
我精心制作了下面列出组成员的命令: gwmi win32_group -filter 'Name="Administrators"'|%{$_.GetRelated('Win32_UserAccoun
performance - 微调 HTML5 Phonegap 应用程序
已成功构建 HTML5 应用程序。以下库用于此: jquery.mobile-1.1.1.min.js jquery.mobile-1.1.1.min lawnchair.js 一切正常用 Phone
python - Keras:微调 Inception 时精度下降
我在使用 Keras 微调 Inception 模型时遇到问题。我已经成功地使用教程和文档生成了一个完全连接的顶层模型，该模型使用 Inception 中的瓶颈特征将我的数据集分类到正确的类别中，准
nlp - 微调 DistilBertForSequenceClassification : Is not learning, 为什么损失没有改变？权重没有更新？
我对 PyTorch 和 Huggingface-transformers 比较陌生，并在此 Kaggle-Dataset 上试验过 DistillBertForSequenceClassificat

首页

博学

6Ren·AI

商城

javascript - Cytoscape JS 布局加载微调器