d3嵌套选择-表附加在d3.v2中有效，但在d3.v3中无效

Question

问题

我将按照D3 API参考中的示例动态添加到现有表中 。 问题是，当我包含d3.v2.js时，此代码有效，但是当我切换至d3.v3.js时，此代码不起作用。

使用d3.v2时，所有内容都会按我期望的那样追加。 使用d3.v3时，仅会添加sessions的第一个对象，而其他位置则找不到。 我创建了两个显示不同行为的小提琴。

小提琴

• JSFiddle：v2行为
• JSFiddle：v3行为

我使用追加中的项目的代码sessions表hurricanes如下所示：

使用Javascript

var sessions = [
    {name: 'Fred',     year: 2014},
    {name: 'Bill',     year: 1970},
    {name: 'Pookie',   year: 1892},
    {name: 'Hurry',    year: 1941},
    {name: 'Nick',     year: 1953}
];

d3.select('#hurricanes').select('tbody').selectAll('tr')
        .data(sessions, function(d) { return d; })
    .enter().append('tr')
        .selectAll('td')
        .data(function(d) { return d3.values(d); })
    .enter().append('td')
        .text(function(d) { return d; });

HTML

<table id='hurricanes'>
  <tbody>
    <tr>
      <td>Andrew</td>
      <td>1992</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>1991</td>
    </tr>
    <tr>
      <td>Irene</td>
      <td>2011</td>
    </tr>
    <tr>
      <td>Katrina</td>
      <td>2005</td>
    </tr>
    <tr>
      <td>Ivan</td>
      <td>2004</td>
    </tr>
  </tbody>
</table>

我已经阅读了有关从2.0切换到3.0的指南，但没有发现任何用处。

题

为什么使用d3.v3.js会更改表的添加方式？ 而我该如何解决呢？

谢谢！

Answer 1

有两个问题导致您得到奇怪的结果。

第一个问题是页面上现有元素没有绑定数据，因此，当您进行初始选择时，将选择5个现有tr元素。 这意味着我们应该期望.enter()选择为空，并且不会创建任何新元素。

第二个问题来自第一个。 由于没有数据绑定到现有元素，因此在调用键函数时，它将检查与现有元素关联的值，并返回undefined 。 似乎d3.v2和d3.v3处理此错误的方式有所不同，但在两种情况下都是错误，对于.enter() ， .enter()选择最终包含一个额外的元素，而在.enter()包含5个额外的元素。 d3.v2的情况。

您可以通过在关键函数中将d的值记录到控制台中来看到这种情况：

d3.select('#hurricanes').select('tbody').selectAll('tr')
  .data(sessions, function(d) { 
     console.log(d);
     return d; 
  })

您会注意到输出为

undefined
undefined
undefined
undefined
undefined
Object {name: "Fred", year: 2014}
Object {name: "Bill", year: 1970}
Object {name: "Pookie", year: 1892}
Object {name: "Hurry", year: 1941}
Object {name: "Nick", year: 1953}

您说它正在d3.v2中工作，但事实并非如此。 您只是得到了不同的错误结果。 由于数据数组中只有5个对象，因此连接数据后，输出中应该只有5个tr元素。 换句话说， .enter()选择中不应包含任何内容，因为tr元素的数量与数据集中的数据点数量相同。

如果删除键功能，则d3将还原为按索引而不是按键绑定数据。 当您执行此操作时，您会注意到在d3和d2两种版本中，您现在都可以获得5个元素的预期结果：

d3.v2 JSFiddle

d3.v3 JSFiddle

现在，数据已绑定到最初存在的元素。 但是现在有一个问题，因为绑定的数据没有反映在元素本身中。 换句话说，写着'Andrew 1992'的行绑定到数据{name: 'Fred' year: 2014} ，依此类推。 要更新为新值，您将需要选择现有节点并使用.text()函数以其新绑定的数据更新元素。

不过，请将其放在一边，因为无论如何这都不是您要尝试完成的事情。 您要在输出中包含10个元素，原始5个元素，以及从数据集中新创建的5个元素。 为此，您要么需要：

---

（1）在sessions数据中添加“ Andrew”，“ Bob”，“ Irene”，“ Katrina”和“ Ivan”的条目，删除代表它们的现有html元素，然后从该数据中构建完整的表。

方法1：JSFiddle

---

要么

---

（2）在tbody创建一个空选择，并将新元素附加到其中：

 d3.select('#hurricanes').select('tbody').selectAll('.new-entry') .data(sessions) .enter().append('tr') .attr('class', 'new-entry') .selectAll('td') .data(function(d) { return d3.values(d); }) .enter().append('td') .text(function(d) { return d; }); 

方法2：JSFiddle

---

希望对您有所帮助。 如果您想阅读嵌套选择和关键功能，以下是Mike Bostock本人的几篇精彩文章：

嵌套选择

对象常数