Javascript 在D3.js中更新和转换组中的单个SVG元素

我目前有一系列的矩形，我想改变填充颜色个别

我尝试过使用循环更新填充颜色，但整套矩形同时更新填充颜色

因此，我尝试添加一个延迟，有一个延迟，但随后所有矩形的填充颜色一起变为橙色。我也在Javascript中尝试过setTimeout方法，但同样的情况也发生了

我希望能够看到一个接一个地发生的更改，即“a”的填充更改、暂停、“f”的填充更改、暂停等等。我怎样才能做到这一点

另外，是否有方法（在循环中）更改单个矩形填充？如下图所示，当循环中的变量i等于4时，g的填充改变颜色，但当i等于5时，我想将g变回蓝色，将y变回橙色。有没有办法做到这一点而不必创建两个d3方法，一个是将颜色更新为橙色，然后将第i-1个元素重新更新为蓝色填充

到目前为止用于更新填充颜色的代码，现在可以一次更新所有内容

            for (var i = 0; i < x.length; i++ ) {
                svg.select("#rect" + i)
                   .data([i])   
                   .transition()
                   .delay(1000)
                   .attr("x", (i * 45) + 45)
                   .attr("y", "0px")
                   .attr("width", "40px")
                   .attr("height", "40px")
                   .attr("fill", "rgb(255, 116, 56)");                             
            }   

for（变量i=0；i

我还应该补充一点，每个矩形都有自己的ID，即“a”有ID rect0，“f”是rect1，等等

---

谢谢

使延迟成为

i

的功能。就像在（和其他许多地方）

第一个元素立即开始更改，第二个元素10毫秒后开始更改，依此类推

rect.transition()
      .duration(500)
      .delay(function(d, i) { return i * 10; }) 
      .attr(/* Change something */);