EG of Nested Array selections

by Nivaldo

JavaScript

var stepData = [
    [
        [0, 0, 0, 0, 0, 0, 0],
        [0, 1, 1, 1, 1, 1, 1],
        [0, 1, 2, 2, 2, 2, 2],
        [0, 1, 2, 2, 2, 2, 2]
    ],
    [
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 1],
        [0, 1, 1, 2, 2, 2, 2]
    ]
];
svgWidth = 600;
svgHeight = 1000;
delay = 1000;
svg = d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);

svg.append("g")
    .selectAll("g")
    .data(stepData[0])
    .enter()
    .append("g")
    .selectAll("text")
    .data(function (d, i, j) { // i is the datum index (0..27)
        return d;
    })
    .enter()
    .append("text")
    .attr("class", "data")
    .text(function (d, i, j) { 
        if ( j === 0) { // j is the row index
            return d;
        }
    })
    .attr("x", function (d, i, j) {
        return (i * 50) + 50;
    })
    .attr("y", function (d, i, j) {
        return (j * 50) + 50;
    })
    .attr("text-anchor", "middle")
    .attr("fill", "black");

svg.selectAll(".data")
    .transition()
    .delay(function (d, i, j) {
        //console.log(i);
        return i * delay + 1000;
    })
    .remove();