Estoy tratando de crear una animación donde los elementos de una cuadrícula aparecen en orden de izquierda a derecha y de arriba a abajo. Entonces el orden sería: A_(1,1) , A_(1,2) ,... A_(1,d) ... A_(n,d) .

Mi código actual muestra todos los elementos en una columna de la cuadrícula, seguido de un retraso, luego todos los elementos en la segunda columna, retraso, y así sucesivamente. Estoy seguro de que esto se debe a que el elemento de índice en la línea 56, que controla el tiempo de retraso de cada elemento, se restablece con cada fila. Me gustaría saber si hay una forma de evitar esto, como tener una variable que realice un seguimiento del número de columna de 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; };