D3.js - 浏览器冻结 - 随着时间的推移更新的元素太多

Question

我对"绕D3.js代码有一些问题。

我创建了许多圆圈，并在其中投入了每秒更新的时间，但是这很快就会导致不同的浏览器崩溃或冻结。

从一些谷歌搜索中，我认为我的问题是一段时间后元素太多，但我没有弄清楚如何在不发生此问题的情况下更新它。

代码中存在问题的部分：

    oranges.append("circle")
        .attr("cx", function (d) {return d*2;})
        .attr("cy", function (d) {return d*2;})
        .attr("r", function (d) {return d/2;})
        .attr("fill", "orange")
        .attr("stroke", "red")
        .attr("stroke-width", "4px")

var timeoranges = oranges.append("text")
        .attr("x", function (d) {return d*2 - 15;})
        .attr("y", function (d) {return d*2;})
        .attr("dy", ".35em");
function updateOranges() {  

timeoranges.text(function() { 
        setTimeout(updateOranges, 1000);
        return Date();});
}
updateOranges();            

Answer 1

将针对timeoranges选择中的每个元素调用您传递给timeoranges.text的函数。 因此，如果你有一个 100 个圈子，你setTimeout 100 次，而setTimeout又叫 100 次，依此类推......

我想你的意思是：

function updateOranges() {  
  timeoranges.text(function() {        
        return Date();
  });
  setTimeout(updateOranges, 1000);
}
updateOranges();