javascript - 按顺序而不是一起过渡面板 (D3)

Question

我有一堆正方形网格正在使用两个 while 循环构建。我试图让它们单独淡入淡出，一次使用 .transition 函数淡入淡出。但是，我注意到所有人都在同时过渡。我意识到 D3 是异步的，但我想知道是否有任何方法可以覆盖它。

请参阅下面的代码片段和 fiddle 链接:https://jsfiddle.net/nxtjddvr/

谢谢!

var x = 0;
var y = 1;
var xLoc = 0;
var yLoc = 100;


while (x < 3) {

    svg.append('rect')
    .transition()
    .delay(function(d,i) {
        return i*2000
    })
    .duration(5000)
    .attr('width', '100')
    .attr('height', '100')
    .attr('x', xLoc)
    .attr('y', 0)
    .style('stroke', 'white' )

    while (y < 3) {
        svg.append('rect')
        .transition()
        .duration(5000)
        .attr('id', 'trans')
        .attr('width', '100')
        .attr('height', '100')
        .attr('x', xLoc)
        .attr('y', yLoc)
        .style('stroke', 'white' )
        yLoc += 100;
        y++;
    }
    yLoc = 100;
    y=1;
    xLoc += 100
    x++;
}

Answer 1

您不需要 d3 中的循环，也不需要窗口计时器，here是关于如何使用 d3 做你想做的事情的粗略想法......

var data = [32, 57, 112];
    var height = 300;
    var width = 300;

    d3.select('#chart')
    .append('svg')
    .style('background-color', 'lightgrey')

    var svg=d3.select('svg')
    .attr('height', height)
    .attr('width', width)


        svg.selectAll("rect")
        .data([1, 2, 3, 1, 2, 3, 1, 2, 3])
        .enter().append('rect')
        .attr('id', 'trans')
        .attr('width', '100')
        .attr('height', '100')
        .attr('x', function(d, i){
           return (d-1)*100 
         })
        .attr('y', function(d,i){
           return Math.floor((i/3))*100
         })
         .attr("opacity",0)
        .style('stroke', 'white' )
        .transition()
        .delay(function(d,i) {
            return i*2000
        })

        .duration(5000)

        .attr("opacity",1)