D3創建表

Question

根據這裏給出的解決方案：Creating a table linked to a csv file

我不明白，在這部分代碼會發生什麼：

var cells = rows.selectAll("td") 
     .data(function(row) { 
      return columns.map(function(column) { 
       return row[column]; 
      }); 
     }) 

我知道，數據（）將在每個循環我的數組'行'中的元素，並且Array.prototype.map（）將「創建一個新的數組，其結果是在此數組中的每個元素上調用一個提供的函數」。

在return columns.map(function(column)，'列'究竟是什麼？

如果有人能夠一步一步解釋由兩個匿名函數形成的循環，我將不勝感激。

Answer 1

這是nested selection的示例。爲了理解它，您還需要考慮將數據綁定到行之前的一段代碼。

在此位的代碼會發生什麼事是，你說的是data()功能考慮每個在以前data()呼叫

var rows = tbody.selectAll("tr") 
    .data(data) 
    ... 

所有這些元素將目前已經通過在陣列中的各個元件的依次處理，稱爲row。內部匿名函數採用此行，並且對於columns的每個元素，獲取由特定column指定的row中的元素。

也就是說，row是一個關聯數組（或對象），其關鍵字與columns數組中的元素名稱相同。所有map是否將這些元素提取到數組中，然後將其用作特定td單元的數據。

經過所有內部處理後，數組被傳遞給data()--雖然傳入了一個數組元素，但返回一個數組。這樣一個表可以創建行和列（這是一個嵌套選擇點）。將被綁定到每個td單元格的內容是最內層的return返回的內容。

爲了回答您的具體問題，column變量將依次綁定到columns數組的每個元素。也就是說，在map()的第一次迭代期間，它將是columns[0]，在第二個columns[1]等期間。