Javascript 将矩阵的元素逐个单元格绑定到网格

我正在try 创建一个动画，其中网格元素以从左到右、从上到下的顺序出现.所以顺序是:A_(1,1)A_(1,2)，...A_(1,d)...A_(n,d) .

我当前的代码显示网格中一列中的所有元素，后面是延迟，然后是第二列中的所有元素，延迟，依此类推.我确信这是因为第56行中的索引元素控制每个元素的时间延迟，每行都会重置.我想知道是否有办法解决这个问题，比如用一个变量来跟踪d的列数.

var data = [[0,1],[2,3]];

function myMatrix2(data) {

    var margin = {top: 50, right: 100, bottom: 50, left: 100},
        width = 250,
        height = 250;

    const svg = d3
        .select('.grid2')
        .append('svg')
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    numrows = data.length;
    numcols = data[0].length;

    rw=width/numrows;
    hw=height/numcols;

    var x = d3.scaleOrdinal()
        .domain(d3.range(numcols))
        .range(d3.range(0,width,width/numcols));

    var y = d3.scaleOrdinal()
        .domain(d3.range(numrows))
        .range(d3.range(0,height,height/numrows));

    var row = svg.selectAll(".row")
        .data(data)
        .enter().append("g")
        .attr("class", "row")
        .attr("transform", function(d, i) {return "translate(0," + y(i) + ")"; });

    var cell = row.selectAll(".cell")
        .data(function(d) { return d; })
        .enter().append("g")
        .attr("class", "cell")
        .attr("transform", function(d, i) { return "translate(" + x(i) + ", 0)"; });

    cell.append('rect')
        .attr("width", rw)
        .attr("height", hw)
        .style("stroke", "black")
        .style("stroke-width", "2px")
        .style("fill", 'white')

    cell.append("text") //Add matrix elements
        .attr("dy", ".32em")
        .attr("x", rw/2 )
        .attr("y", hw/2 )
        .attr("text-anchor", "middle")
        .style("font-size","14px")
        .transition() //Delay starts here
        .delay(function(d,i) {console.log("D: "+d + " I: "+i); return i*3000;})
        .text(function(d) { return d; })
    return;
};