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本人的幾篇精彩文章：

嵌套選擇

對象常數