javascript - 访问器(行)函数中的 d3.tsv/d3.csv 列

Question

考虑以下 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);});

我的具体问题如下:

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

• 为什么访问函数中需要行迭代器 (i) 参数？

Answer 1

What is the underlying parse function that maps the third (columns) argument to the column names in the accessor (row) function?

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

• 第一个参数是行
• 第二个参数是索引，从零开始
• 第三个参数是列名数组

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

当您加载 CSV(或 TSV)时，d3.csv(或 d3.tsv)会创建一个数组属性 header ，名为 columns(注意像 for...in 循环这样的循环，因为 it will include that property )。对于您的示例，它是:

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

这引出了您的第二个问题:

Why do I need the row iterator (i) argument in the accessor function?

你不知道。关键是这段代码使用了 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。