difference between function(d) and function(d,i)?

前端未结

关注

 3  999

夕颜

Every D3js beginner must be going through this thought, I am pretty much sure about it.

I have been around this thing for few hours now!!!!But I don\'t

相关标签:

3条回答

盖世英雄少女心

2021-02-01 23:18

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 i gives 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.

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 arguments object - or you can ignore them.

(Note: you should have a lowercase f in function().)

0 讨论(0)
发布评论:

提交评论
- 加载中...

别跟我提以往

2021-02-01 23:23

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 d is the value of the data, and i is his index. You can take a look of this example here: http://jsfiddle.net/M8nK8/

0 讨论(0)

广开言路

2021-02-01 23:34
Your example is a good illustrator of the difference between the two.

In the first example, only d is used. d represents the data associated with a given selection. In this case, an array of selected div elements is created, one for each element in the data array:
```
chart.selectAll("div")
     .data(data)
     .enter()
     .append("div")
```
This not only creates an array of div elements, but associates data with each of those elements. This is done on a one-to-one basis, with each div corresponding to a single element in the data array. One is associated with '4', one with '8', and so on.

If I then go on to use .text(function(d){...}) on the array of selections, d will refer to the data associated with each selected div, so if I use the following method on my selections:
```
.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.

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 d and i, then i will correspond to this index. Going back to our divs, the div associated with '4' will have an index of '0', '8' will have an index of '1', and so on.

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)})
```
cat will correspond to the data of the selection, and moose will correspond to the index.
0 讨论(0)
发布评论:

提交评论
- 加载中...