[英]Is there a better approach to using transitions within timer functions in d3js
I have a visualization that has a scatter plot with lines and another plot, both use a separate svg element.我有一个可视化,它有一个带线条的散点图和另一个图,都使用单独的 svg 元素。
To animate the visualization I use the timer function, however I need to transition circles in both scatter and plot with just circles and transition the line.为了使可视化动画,我使用了计时器功能,但是我需要在散点图和绘图中用圆圈过渡圆圈并过渡线。 This results me in having a timer function that has transitions and it looks like this这导致我拥有一个具有转换的计时器功能,它看起来像这样
// 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)
}
}
Now this works fine, but after some times the page becomes unresponsive.现在这工作正常,但一段时间后页面变得无响应。 Is there a better way to do what I am doing?有没有更好的方法来做我正在做的事情?
It might be that using setTimeOut
recursively like that is causing a bit of a memory leak.可能是像这样递归地使用setTimeOut
会导致一些内存泄漏。
I think back in the dim and distant past I had the same problem once, and it went away when I used the javascript function setInterval
instead.我回想起在遥远的过去,我曾经遇到过同样的问题,当我使用 javascript 函数setInterval
时它就消失了。 See https://www.w3schools.com/jsref/met_win_setinterval.asp见https://www.w3schools.com/jsref/met_win_setinterval.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.