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, columns) {...}。我花了相当多的时间浏览API documentation并使用Google搜索，但我无法找到d3.csv()（或其他任何参数）可以传递给回调函数的基本事实。解析器，就此而言）。

有人可以：

将我引导至记录的位置，或
解释我在这里可能缺少的更基本的d3或JavaScript概念？

要清楚，我理解通过columns参数传递的内容，我只是想了解我可以在哪里知道第三个参数是列名称数组以及其他参数可以通过。

Answer 1

该函数的名称是行转换函数，或者只是行函数（或者，在D3 v3中，访问函数）。您可以在d3.dsv的API中阅读相关内容。

它收到的参数在API中有详细描述。根据它，

如果指定了行转换函数，则为每一行调用指定的函数，传递一个表示当前行（d）的对象，索引（i）从零开始，用于第一个非标题行，以及列名称数组。（强调我的）

因此，正如您所看到的，该函数接受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>

d3.js：帮助理解回调函数的参数

1 个答案: