访问器（行）函数中的 d3.tsv/d3.csv 列答案

【问题标题】：d3.tsv/d3.csv columns in accessor (row) function访问器（行）函数中的 d3.tsv/d3.csv 列
【发布时间】：2017-03-31 08:05:07
【问题描述】：

考虑以下 tsv 文件：

Code    k1  k2
pf_1    0.2 0.3
pf_2    0.3 0.7
pf_3    0.2 0.4
pf_4    0.1 0.6
pf_5    0.8 0.9

我一直在尝试了解以下代码的工作原理，但没有找到明确的答案：

d3.tsv("test.tsv") 
    .row(function(d, i, columns){ d.total = columns.length; return d;})
    .get(function(d){ console.log(d);});

我的具体问题如下：

【问题讨论】：

【解决方案1】：

将第三个（列）参数映射到访问器（行）函数中的列名的底层解析函数是什么？

访问器函数，也称为row conversion function，是为每一行调用的函数，它需要 3 个参数（这将进一步回答您的第二个问题）：

第三个参数很有趣，它是在 D3 v4.x 中引入的。我相信它回答了你的第一个问题：

当您加载 CSV（或 TSV）时，d3.csv（或 d3.tsv）会创建一个带有标题的 数组属性，名为 columns（注意像 for...in 循环，因为 it will include that property) 。在您的示例中，它是：

columns: ["Code", "k1", "k2"]

这就引出了你的第二个问题：

为什么我需要在访问器函数中使用行迭代器 (i) 参数？

你没有。问题是这段代码使用了 third 参数，即columns 属性，为了能够使用第三个参数，我们必须提供它之前的两个参数，即使如果我们不使用它们：

.row(function(d, i, columns){ d.total = columns.length; return d;}) 
//3rd argument---------^

JavaScript 中有一个约定，我认为不是很有名，未使用的参数应命名为下划线 (_)。在这种情况下，这个函数将是：

.row(function(d, _, columns){ d.total = columns.length; return d;}) 
//not used-------^

因此，该代码所做的是获取columns.length 的值，即 3，并为每个对象创建一个新属性：

d.total = columns.length; return d;

所以，对象最终会是这样的：

{Code: "pf_1", k1: "0.2", k2: "0.3", total: 3}

使用新属性total。

【讨论】：