javascript 函数（d）和函数（d，i）之间的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17343338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
difference between function(d) and function(d,i)?
提问by
Every D3js beginnermust be going through this thought, I am pretty much sure about it.
每个D3js 初学者都必须经历过这个想法，我非常确定。
I have been around this thing for few hours now!!!!But I don't know how to use it and what is the differencebetween them?
我已经在这个东西周围呆了几个小时了！！！！但我不知道如何使用它，它们之间有什么区别？
function(d){return d}
function(d,i){return d and some more custom code}
for Example--->
例如--->
var data = [4, 8, 15, 16, 23, 42];
无功数据 = [4, 8, 15, 16, 23, 42];
Function(d):::::
chart.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
------------------------------------------------------------------------------------
Function(d*i):::::
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", function(d, i) { return i * 20; })
.attr("width", x)
.attr("height", 20);
采纳答案by ckersch
Your example is a good illustrator of the difference between the two.
您的示例很好地说明了两者之间的区别。
In the first example, only dis used. drepresents the data associated with a given selection. In this case, an array of selected divelements is created, one for each element in the dataarray:
在第一个示例中，仅d使用了。d表示与给定选择相关联的数据。在这种情况下，将div创建一个选定元素的数组，数组中的每个元素对应一个data：
chart.selectAll("div")
.data(data)
.enter()
.append("div")
This not only creates an array of divelements, but associates data with each of those elements. This is done on a one-to-one basis, with each divcorresponding to a single element in the dataarray. One is associated with '4', one with '8', and so on.
这不仅创建了一个div元素数组，而且将数据与这些元素中的每一个相关联。这是在一对一的基础上完成的，每个div对应于data数组中的一个元素。一个与“4”相关联，一个与“8”相关联，依此类推。
If I then go on to use .text(function(d){...})on the array of selections, dwill refer to the data associated with each selected div, so if I use the following method on my selections:
如果我继续在.text(function(d){...})选择数组上使用，d将引用与每个选定 div 关联的数据，因此，如果我对我的选择使用以下方法：
.text(function(d) { return d; });
Each of my divs will have text added, the value of which is d, or the data associated with the element.
我div的每个s 都会添加文本，其值为d，或与元素关联的数据。
When an array of selections is created, they are also given an index in the array. In your example, this corresponds to the position of their data in the data array. If your function requests both dand i, then iwill correspond to this index. Going back to our divs, the divassociated with '4' will have an index of '0', '8' will have an index of '1', and so on.
当一个选择数组被创建时，它们也会在数组中被赋予一个索引。在您的示例中，这对应于其数据在数据数组中的位置。如果您的函数同时请求d和i，i则将对应于该索引。回到我们的divs，div与 '4' 相关联的索引为 '0'，'8' 的索引为 '1'，依此类推。
It's also important to note that the character used in the variable requested doesn't matter. The first variable in the function call is always the data, and the second is the index. If i used a method like
同样重要的是要注意，请求的变量中使用的字符无关紧要。函数调用中的第一个变量始终是数据，第二个变量是索引。如果我使用了类似的方法
.text(function(cat,moose){ return( "data is: " + cat + " index is: " + moose)})
catwill correspond to the data of the selection, and moosewill correspond to the index.
cat将对应于选择的数据，moose并将对应于索引。
回答by leonard vertighel
I hope that this example can help you. This is a complete web page where you can start playing:
我希望这个例子可以帮助你。这是一个完整的网页，您可以在其中开始播放：
<!doctype html>
<meta charset="utf-8">
<title>my first d3</title>
<body>
<script>
var data=[10,20,30,40];
var lis = d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
lis.enter()
.append("li")
.text(function(d,i){ return "item n° "+i+" has value: "+d})
</script>
Basically dis the value of the data, and iis his index.
You can take a look of this example here: http://jsfiddle.net/M8nK8/
基本上d是数据的值，i是他的索引。您可以在此处查看此示例：http: //jsfiddle.net/M8nK8/
回答by nnnnnn
If you're talking about the callback functions you would pass to methods like .attr(), then the function is called for each item in the current selection, where the igives you the index of the current item, but depending on what you're doing you might not care about the index. So although D3.js will always call your function with both arguments, if you don't actually need the second argument in a particular case your function need not declare it explicitly.
如果您正在谈论您将传递给方法的回调函数.attr()，那么该函数会为当前选择中的每个项目调用，其中i为您提供当前项目的索引，但取决于您在做什么，您可能会不在乎指数。因此，尽管 D3.js 将始终使用两个参数调用您的函数，但如果您在特定情况下实际上不需要第二个参数，则您的函数无需显式声明它。
JavaScript lets you call any function with any number of arguments regardless of how many were explicitly included in the function declaration. If you call a function with fewer arguments than were defined the leftovers will get the value undefined. If you call a function with more arguments than were defined you can still access the additional ones from within the function by using the argumentsobject- or you can ignore them.
JavaScript 允许您使用任意数量的参数调用任何函数，而不管函数声明中明确包含多少个参数。如果您调用的函数参数少于定义的参数，则剩余部分将获得值undefined。如果您调用的函数的参数比定义的多，您仍然可以使用该arguments对象从函数内部访问其他参数- 或者您可以忽略它们。
(Note: you should have a lowercase fin function().)
（注意：您应该f在function(). 中使用小写字母。）
