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次，打印 [11975,5871,8916,2868] 和 [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次，打印 [11975,5871,8916,2868] 和 [1951,10048,2060,6171] 和 [8010,16145 ，8090,8045] 和 [1013,990,940,6907] ，这很不错

           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 然后 10048 然后 2060 然后 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;
});

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

d3js嵌套选择意外行为

1 个答案: