d3js嵌套选择的意外行为

Question

我一直在摆弄文档中的基本嵌套选择示例，发现了一种无法解释的行为。

以下是添加日志记录的示例(格式化为扰流板(：

<!-- 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(；//调用4次，打印[1197587189162868]和1951、10048、2060、6171]以及[8010、16145、8090、8045][1013、990、940、6907]，这是很好的

           return i;
           })
        .enter().append("tr")
        .attr("test", function(d) {

console.log(d(；//再次调用4次，打印[1197587189162868][strong>1951、10048、2060、6171]和[8010、16145、8090、8045][strong>[1013、990、940、6907][strong>，这是很好的

           return "test";
           });
    var td = tr.selectAll("td")
        .data(function(d) {

console.log(d(；//我预计这将被调用4*4=16次，打印11975，然后5871、8916和2868以及1951等等。事实并非如此！这行打印与上面相同！

            return d;
        })
        .enter().append("td")
        .text(function(d) {

console.log(d(；//这准确地打印了我所期望的：11975然后5871，然后8916再2868和1951以及10048060并且6171

            return d;
        });

为什么扰流板#3打印矩阵元素而不是矩阵子元素？

Answer 1

我认为简单的答案是：因为<td>元素还没有创建。

我运行了你的代码，然后是这些片段：

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;
});

数据不会绑定到每个<td>，直到在最后一个块中输入append。之后，tr变量仍然是4个<tr>元素，现在每个元素有4个子<td>元素，而td变量实际上是<td>元素的4个数组。它们具有不同结构的相关数据。