javascript - 在 D3js 中，如何延迟更新每个节点

Question

我正在使用 D3js。我制作了一个力导向图。但是，当我想更新每个节点颜色(我的主要目标是进行一些计算，然后根据结果更改颜色)时，所有节点都会同时发生。我希望在完成一个节点时有一个延迟，然后转到下一个节点。我还想定期检查所有节点。因此函数 colorChange 应每 2 秒执行一次。

这是main code用于图表。

这是我用于更新节点颜色的代码:

d3.interval(colorChange, 2000);

function colorChange(){
  var color = d3.select("circle").style("fill");
  if (color == "rgb(0, 0, 255)")
    d3.selectAll("circle").each(function(){
      d3.select(this).style("fill","red");
    });
  else
    d3.selectAll("circle").style("fill","blue");

}

Answer 1

您的问题(我的意思是，期望的结果)并不完全清楚，但我想您可以使用延迟转换而不是each来获得您想要的结果:

function colorChange() {
    var color = d3.select("circle").style("fill");
    if (color == "rgb(0, 0, 255)") {
        d3.selectAll("circle")
            .transition()
            .delay((d, i) => i * 50)
            .duration(100)
            .style("fill", "red");

    } else {
        d3.selectAll("circle")
            .transition()
            .delay((d, i) => i * 50)
            .duration(100)
            .style("fill", "blue");
    }
}

这是更新后的代码(我将间隔更改为 5 秒，只是为了给绘制所有圆圈的时间，所以请稍等一下第一次调用): https://bl.ocks.org/anonymous/raw/bf1921449e33d89ba6259167231f5b32/