stabilizationProgress 和 stabilizationIterationsDone 事件从未触发

分享于2022年12月29日 angular vis.js 问答
【问题标题】:stabilizationProgress and stabilizationIterationsDone events never triggeredstabilizationProgress 和 stabilizationIterationsDone 事件从未触发
【发布时间】:2022-12-21 17:30:12
【问题描述】:

我正在尝试在我的程序中添加 visjs 示例的加载栏: Vis.js example 参见“加载栏”。问题是这两个事件:stabilizationProgress 和 stabilizationIterationsDone 从未触发,但 startStabilizing 和 stabilized 被触发,所以我真的不明白。

这是事件的代码:

this.networkInstance.on('startStabilizing', () => {

              console.log('stab start');
            });
            this.networkInstance.on('stabilized', () => {
              console.log('stabilized');
              this.networkInstance.setOptions({ physics: false });
            });
            this.networkInstance.on("stabilizationProgress", function (params) {
              console.log("progress")
              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")!.innerText =
                Math.round(widthFactor * 100) + "%";
            });
            this.networkInstance.once("stabilizationIterationsDone", function () {
              console.log("done")
        
              document.getElementById("text")!.innerText = "100%";
              document.getElementById("bar")!.style.width = "496px";
              //document.getElementById("loadingBar")!.style.opacity = 0;
              // really clean the dom element
              setTimeout(function () {
                document.getElementById("loadingBar")!.style.display = "none";
              }, 500);
            });
        
        

这是我的选择:

            var options = {
              interaction: { hover: true, selectConnectedEdges: false, tooltipDelay: 200, hideEdgesOnDrag: true, hideEdgesOnZoom: true },
              physics: {
                forceAtlas2Based: {
                  gravitationalConstant: -26,
                  centralGravity: 0.005,
                  springLength: 100,
                  springConstant: 0.18,
                },
                maxVelocity: 146,
                minVelocity: 10,
                solver: "forceAtlas2Based",
                timestep: 0.2,
                stabilization: {
                  enabled: true,
                  iterations: 2000,
                  updateInterval: 1,
                }
              }
            };

我尝试使用其他 updateInterval 值,但无论如何都没有触发事件,我真的不明白为什么稳定开始和结束正确但 stabilizationProgress 和 stabilizationIterationDone 不起作用。

如果有人可以向我提供解释,我会很乐意。提前致谢。


【解决方案1】:

我有完全相同的问题。你找到解释了吗?

最好的祝福,

【讨论】: