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]等期间。