javascript - 在 D3.js 中更新和转换组内的各个 SVG 元素

Question

我目前有一系列矩形，我想单独更改填充颜色。

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

因此，我尝试添加延迟，有延迟，但所有矩形的填充颜色一起更改为橙色。我也尝试过 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)");                             
            }   

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

谢谢!

Answer 1

使延迟成为i的函数。就像this example (以及许多其他)。

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

第一个元素立即开始变化，第二个元素在 10 毫秒后开始变化，依此类推。