javascript - How does d3.svg.diagonal() read bound data? -

i in process of learning d3.js right now, , going through few tutorials, find confused how commands d3.svg.diagonal() able access bound data. take example below:

 var canvas = d3.select('body').append('svg')         .attr('width', 500)         .attr('height', 500)         .append('g')             .attr('transform', 'translate(50,50)');      var tree = d3.layout.tree()         .size([400,400]);       var data = {         'name':'max',         'children': [             {                 'name':'sylvia',                 'children': [                     {'name': 'craig'},                     {'name': 'robin'},                     {'name': 'anna'}                 ]             },             {                 'name': 'david',                 'children': [                     {'name': 'jeff'},                     {'name': 'buffy'}                 ]             }         ]     }      var nodes = tree.nodes(data);     var links = tree.links(nodes);      var node = canvas.selectall('.node')         .data(nodes)         .enter()         .append('g')             .attr('class', 'node')             .attr('transform', function(d){ return 'translate(' + d.x +','+ d.y+')';});      node.append('circle')         .attr('fill', 'steelblue')         .attr('r', 5);      node.append('text')         .text(function(d) { return d.name; });      var diagonal = d3.svg.diagonal();      var link = canvas.selectall('link')         .data(links)         .enter()         .append('path')             .attr('class', 'link')             .attr('fill', 'none')             .attr('stroke', '#adadad')             .attr('d', diagonal) 

i can see line 'var diagonal = d3.svg.diagonal()' function create "diagonal" paths, when setting attributes .link class-named elements creating, not see how '.attr("d", diagonal);' ever gets access data bound '.data(links)'. maybe if called function 'd' passed it, stands, not see diagonal ever gets access data. don't think connected tree layout, because never passed variable 'diagonal' either. can me wrap head around this?

the code

.attr("d", diagonal) 

is in case equivalent to

.attr("d", function(d, i) { return diagonal(d, i); }) 

you're passing function diagonal() .attr() call in first case. in second case same thing happens except function pass anonymous (i.e. doesn't have name) , calls diagonal() inside.

from the documentation:

[i]f value function, function evaluated each selected element (in order), being passed current datum d , current index i, context current dom element.

so passing named function diagonal(), automatically gets data bound elements in selection.