我正在努力学习d3.js，我发现Mike Bostock的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文档和谷歌搜索，但我无法找到关于什么参数可以通过d3.csv() （或任何其他解析器，传递给回调函数）的基本d3.csv() ，那件事）。
有人可以：
引导我到这里记录的地方，或者 解释我可能在这里缺少的更基本的d3或JavaScript概念？为了清楚起见，我理解通过columns参数传递的内容，我只是想了解我可以在哪里知道第三个参数是列名数组以及可以传递的其他参数。
I'm trying to learn d3.js and I find Mike Bostock's bl.ocks very helpful, but often I get hung up on small details in his code. For instance, in his Stacked Bar Chart bl.ock, he parses a CSV using d3.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; }...I noticed that the anonymous callback function has a third parameter - I'm used to seeing function(d, i) {...}, but not function(d, i, columns) {...}. I've spent a decent amount of time looking through the API documentation and googling, but I can't find ground truth on what parameters can be passed to the callback function by d3.csv() (or any of the other parsers, for that matter).
Could someone either:
Direct me to where this is documented, or Explain the more fundamental d3 or JavaScript concept I may be missing here?To be clear, I understand what is being passed in via the columns parameter, I'm just trying to understand where I could go to know that the third parameter is the array of column names and what other parameters can be passed.
最满意答案
该函数的名称是行转换函数 ，或简单的行函数（或者，在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>
The name of that function is row conversion function, or simply row function (or, in D3 v3, accessor function). You can read about it in the API for d3.dsv.
The arguments it receives are well described in the API. According to it,
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)
So, as you can see, the function accepts 3 arguments, the array of column names being the third one. As any other JavaScript function, you can pass less arguments or more arguments to it (the excess is simply ignored).
Here is a demo of it. Suppose you have this CSV:
foo,bar,baz
12,43,23
23,65,32
12,27,17
The third argument will be the headers, that is, "foo", "bar" and "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>
Finally, pay attention to this: each D3 method has its own arguments being passed. For the vast majority of D3 methods, the third argument is the node group.
Have a look at this example:
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>
更多推荐
发布评论