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秒，只是为了给所有圈子画画时间，所以请稍等一下第一次来电）：{{3}}

Answer 2

这可能会实现您想要实现的目标：

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");
      // How long to wait in ms
      sleep(100);
    });
  else
    d3.selectAll("circle").style("fill","blue");

}

function sleep(ms) {
   var now = new Date().getTime();
   while(new Date().getTime() < now + ms){ /* do nothing */ } 
}

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

2 个答案: