D3: what does this arrow function do and how does the data binding happen

Dear freeCodeCamp community:

I am still a d3 beginner. I am still not familiar with the the constructs in d3. I just try to use them but now I really want to break them down. Can anyone explain the part with arrow function and the ternary operator?
let svg d3.select(“svg”); let my_data = [4,5,6];

update = svg.selectAll(‘rect’) .data(my_data, (d,i) => d ? d:i);

how does the binding here happen? and what is especially the result of this here (d,i) => d ? d:i? I tried to search all the time but I could not find any matching answer.

Thank you very much

What you need to know is more related to pure javascript than to D3.
Check this article about falcy values.

Every entry in the console has a return value.

let x = 2334.22 // returns true
const yourStr = "I'm a string" // retuns true

Now, if the console is evaluating a falcy value, the result is another:

let y = 0 // returns false
const yourStr = "" // returns false
var boolean = false // returns false


This returns [4, 5, 6], because there is not value falcy.

Don’t know much about D3 so I probably shouldn’t try to explain anything.

The API docs do have an example that talks about the key function and “current index (i)”/“current datum (d)”. The example is somewhat similar to your code and may answer your question.

Yes, actually I am also interested what keys the elements of the dataset will have and the 3 rectangles imagine we have created 3 rectangles in our html.