根据此处给出的解决方案: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”到底是什么?
如果有人能一步一步地向我解释这两个匿名函数形成的循环,我将不胜感激。
最佳答案
这是一个 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]
等等
关于javascript - D3 创建表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15448952/