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];
            });
        })

我知道data（）将遍历数组'row'中的每个元素，而Array.prototype.map（）将“创建一个新数组，其结果是在此数组中的每个元素上调用提供的函数” 。

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

如果有人可以一步一步解释我由两个匿名函数形成的循环，我将不胜感激。

Answer 1

这是nested selection的示例。要理解它，您还需要考虑将数据绑定到行之前的代码位。

这段代码中发生的事情是你告诉data()函数考虑在前一个data()调用中传入的数组的每个元素

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

现在将依次处理这些元素中的每一个，并将其称为row。内部匿名函数接受此行，并为columns的每个元素获取由row指定的column元素。

也就是说，row是一个关联数组（或一个对象），其键名与columns数组中的元素名称相同。所有map都会将这些元素提取到一个数组中，然后将其用作特定td单元格的数据。

在所有内部处理之后，将数组传递给data() - 尽管传入了一个数组元素，但返回一个数组。这样，可以使用行和列创建表（这是具有嵌套选择的点）。将绑定到每个td单元格的内容是最内层return返回的内容。

要回答您的具体问题，column变量将依次绑定到columns数组的每个元素。也就是说，在map()的第一次迭代期间，它将是columns[0]，在第二次columns[1]期间等。

D3创建一个表

1 个答案: