javascript - d3.js:帮助理解回调函数的参数

Question

我正在尝试学习 d3.js，我找到了 Mike Bostock's bl.ocks非常有帮助，但我经常被他代码中的小细节挂断。例如，在他的 Stacked Bar Chart bl.ock 中，他使用 d3.csv 解析 CSV:

d3.csv("data.csv", function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
}...

我注意到匿名回调函数有第三个参数 - 我习惯看到 function(d, i) {...}，但不是 function(d, i , 列){...}。我花了相当多的时间浏览 API documentation和谷歌搜索，但我找不到关于哪些参数可以通过 d3.csv() (或任何其他解析器，就此而言)传递给回调函数的基本事实。

有人可以:

• 将我带到记录的地方，或者
• 解释一下我在这里可能遗漏的更基本的 d3 或 JavaScript 概念？

明确地说，我了解通过 columns 参数传递的内容，我只是想了解我可以去哪里知道第三个参数是列名数组，还有哪些参数可以传递。

Answer 1

该函数的名称是行转换函数，或简称为行函数(或者，在 D3 v3 中，访问器函数)。您可以在 d3.dsv 的 API 中阅读相关信息.

它接收的参数在 API 中有详细描述。据了解，

If a row conversion function is specified, the specified function is invoked for each row, being passed an object representing the current row (d), the index (i) starting at zero for the first non-header row, and the array of column names. (emphasis mine)

因此，如您所见，该函数接受 3 个参数，列名数组 是第三个参数。与任何其他 JavaScript 函数一样，您可以向它传递更少或更多的参数(多余的参数将被忽略)。

这是它的演示。假设您有这个 CSV:

foo,bar,baz
12,43,23
23,65,32
12,27,17

第三个参数是标题，即 "foo"、"bar" 和 "baz":

var csv = `foo,bar,baz
12,43,23
23,65,32
12,27,17`;

var data = d3.csvParse(csv, function(d, i, thirdArgument) {
  if(!i) console.log(thirdArgument)
})

<script src="https://d3js.org/d3.v4.min.js"></script>

最后，请注意这一点:每个 D3 方法都有自己传递的参数。对于绝大多数 D3 方法，第三个参数是节点组。

看看这个例子:

var p = d3.select("body").selectAll(null)
  .data(d3.range(5))
  .enter()
  .append("p")
  .text(Number)
  .attr("foo", function(d,i,n){
    if(!i) console.log(n);
    return null
  });

p {
  display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>