有没有更好的方法在 d3js 的计时器函数中使用转换

Question

我有一个可视化，它有一个带线条的散点图和另一个图，都使用单独的 svg 元素。

为了使可视化动画，我使用了计时器功能，但是我需要在散点图和绘图中用圆圈过渡圆圈并过渡线。 这导致我拥有一个具有转换的计时器功能，它看起来像这样

// define scatter plot circles
// define scatter plot lines

let counter = 0

// define circles for a separate plot

function timer() {

  // update nodes for scatter plot circles

  // update nodes for bubbles circles

    scatterPlotCircles.selectAll("circle") 
         .data(scatterPlotData) 
         .transition() 
         .duration(800) 
         .attr("cx", function (d) {
              return d.x;
          })
         .attr("cy", function (d) {
              return d.y;
         })
         .attr("r", 4)
         .style("fill", function (d) {
            return d.color;
         })


     d3.selectAll(".bubblesClassName")
       .data(data)
       .transition()
       .attr("r", d => {
           console.log(d)
           return d.radius
       })


    //Update lines with transitions

   if(weekCounter %2 == 0) {
      setTimeOut(timer, 2000)
   } else {
      setTimeOut(timer, 4000)
   }

}

现在这工作正常，但一段时间后页面变得无响应。 有没有更好的方法来做我正在做的事情？

Answer 1

可能是像这样递归地使用setTimeOut会导致一些内存泄漏。

我回想起在遥远的过去，我曾经遇到过同样的问题，当我使用 javascript 函数setInterval时它就消失了。 见https://www.w3schools.com/jsref/met_win_setinterval.asp