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

我解决了此问题，将方法稳定化进展和稳定化完成更改为：

                        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中运行？

1 个答案: