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

我知道 data() 将在我的数组“行”中的每个元素上循环，而 Array.prototype.map() 将“创建一个新数组，其结果是对该数组中的每个元素调用提供的函数” .

在 return columns.map(function(column) 处，“column”到底是什么？

如果有人能一步一步地向我解释这两个匿名函数形成的循环，我将不胜感激。

Answer 1

这是一个 nested selection 的例子.要理解它，您还需要考虑将数据绑定(bind)到行之前的代码。

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

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

现在将依次处理这些元素中的每一个并称为 row .内部匿名函数获取此行和 columns 的每个元素, 从 row 获取元素由特定的 column 指定.

即row是一个关联数组(或对象)，其键与 columns 中的元素同名大批。所有 map它是否将这些元素提取到一个数组中，然后将其用作特定 td 的数据单元格。

在所有的内部处理之后，一个数组被传递给data() -- 尽管传入了单个数组元素，但返回了一个数组。这样可以创建一个包含行和列的表(这就是嵌套选择的意义所在)。将绑定(bind)到每个 td 的东西细胞是最里面的return返回。

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