d3js nested selection unexpected behavior - nested

Question

I've been fiddling around with the basic nested selection example in the documentation and I've discovered a behaviour that I cannot explain.
Here's the example with added logging (formatted as spoilers):
<!-- language: lang-js -->
var matrix = [
[11975, 5871, 8916, 2868],
[1951, 10048, 2060, 6171],
[8010, 16145, 8090, 8045],
[1013, 990, 940, 6907]
];
var tr = d3.select("body")
.append("table")
.selectAll("tr")
.data(matrix, function(d, i) {
console.log(d); // called 4 times, printing [11975, 5871, 8916, 2868] and [1951, 10048, 2060, 6171] and [8010, 16145, 8090, 8045] and [1013, 990, 940, 6907], which is nice
return i;
})
.enter().append("tr")
.attr("test", function(d) {
console.log(d); // again, called 4 times, printing [11975, 5871, 8916, 2868] and [1951, 10048, 2060, 6171] and [8010, 16145, 8090, 8045] and [1013, 990, 940, 6907], which is nice
return "test";
});
var td = tr.selectAll("td")
.data(function(d) {
console.log(d); // I'm expecting this to be called 4*4=16 times, printing 11975 and then 5871 and then 8916 and then 2868 and then 1951 and so on. Not the case! This line prints the same as above!
return d;
})
.enter().append("td")
.text(function(d) {
console.log(d); // this prints exaclty what I'm expecting: 11975 and then 5871 and then 8916 and then 2868 and then 1951 and then 10048 and then 2060 and then 6171 and so on.
return d;
});
Why is spoiler#3 printing the matrix elements instead of the matrix sub elements?

Answer 1

I think the short answer is: because the <td> elements haven't been created yet.
I ran your code followed by these snippets:
console.log(tr);
tr.selectAll("td").data(function(d){
console.log(d); // equivalent to spoilers 1/2/3
return d;
});
console.log(td);
td.selectAll("td").data(function(d){
console.log(d); // equivalent to spoiler 4
return d;
});
The data isn't bound to each <td> until the enter-append in the last chunk. After that, the tr variable is still 4 <tr> elements, now with 4 child <td> elements each, while the td variable is actually 4 arrays of <td> elements. They have differently structured data associated with them.