有没有办法在visjs中再次使加载进度条运行？

Question

我使用 visjs 创建了一个新的网络可视化，我按照这里的示例：http://visjs.org/examples/network/exampleApplications/loadingBar.html 来实现加载进度条，它运行良好。我可以使用单选按钮切换到其他 2 个可视化。当我加载其他可视化时，加载栏不会再次出现。我想知道如何再次调用加载栏。提前致谢。

...
<input type="radio" name="op" onclick="net1()" checked>
<input type="radio" name="op" onclick="net2()">

<div id="wrapper">
   <div id="network1"></div>
   <div id="network2" style="display: none;"></div>
   <div id="loadingBar">
     <div class="outerBorder" style="left: 100%;">
        <div id="text">0%</div>
        <div id="border">
           <div id="bar"></div>
        </div>
     </div>
   </div>
</div>

<script>
   function function1(){
...//create network
    network.on("stabilizationProgress", function (params) {
       var maxWidth = 496;
       var minWidth = 20;
       var widthFactor = params.iterations / params.total;
       var width = Math.max(minWidth, maxWidth * widthFactor);
       document.getElementById('bar').style.width = width + 'px';
       document.getElementById('text').innerHTML = Math.round(widthFactor * 100) + '%';
    });
    network.once("stabilizationIterationsDone", function () {
       document.getElementById('text').innerHTML = '100%';
       document.getElementById('bar').style.width = '496px';
       document.getElementById('loadingBar').style.opacity = 0;
       setTimeout(function () {
          document.getElementById('loadingBar').style.display = 'none';
       }, 500);
    });
   }

   function function2(){
...//create onther network
    network.on("stabilizationProgress", function (params) {
       var maxWidth = 496;
       var minWidth = 20;
       var widthFactor = params.iterations / params.total;
       var width = Math.max(minWidth, maxWidth * widthFactor);
       document.getElementById('bar').style.width = width + 'px';
       document.getElementById('text').innerHTML = Math.round(widthFactor * 100) + '%';
    });
    network.once("stabilizationIterationsDone", function () {
       document.getElementById('text').innerHTML = '100%';
       document.getElementById('bar').style.width = '496px';
       document.getElementById('loadingBar').style.opacity = 0;
       setTimeout(function () {
          document.getElementById('loadingBar').style.display = 'none';
       }, 500);
    });
   }
</script>

<script>
   function net1() {
      function1();
      document.getElementById('network1').style.display = "block";
      document.getElementById('network2').style.display = "none";
    }
    function net2() {
      document.getElementById('network1').style.display = "none";
      function2();
      document.getElementById('network2').style.display = "block";
    }
</script>

Answer 1

我解决了它，将方法 stabilizationProgress 和 stabilizationIterationsDone 更改为：

network.on("stabilizationProgress", function (params) {
    document.getElementById('loadingBar').style.opacity = 1;
    var maxWidth = 496;
    var minWidth = 20;
    var widthFactor = params.iterations / params.total;
    var width = Math.max(minWidth, maxWidth * widthFactor);
    document.getElementById('bar').style.width = width + 'px';
    document.getElementById('text').innerHTML = Math.round(widthFactor * 100) + '%';
});
network.on("stabilizationIterationsDone", function () {
    document.getElementById('text').innerHTML = '100%';
    document.getElementById('bar').style.width = '496px';
    document.getElementById('loadingBar').style.opacity = 0;
});

有没有办法在visjs中再次使加载进度条运行？

Is there an way to make loading progress bar run again in visjs?

vis.js