Confused about binding chord data to ribbon path
<p>In referencing this chord diagram example: <a href="https://bl.ocks.org/mbostock/4062006" rel="nofollow">https://bl.ocks.org/mbostock/4062006</a></p>

<p>The following block sets up the ribbon:</p>

<pre><code>var ribbon = d3.ribbon()
    .radius(innerRadius);
</code></pre>

<p>But then later in the code <code>ribbon</code> is then used in a way I can't understand:</p>

<pre><code>g.append("g")
    .attr("class", "ribbons")
  .selectAll("path")
    .data(function(chords) { return chords; })
  .enter().append("path")
    .attr("d", ribbon)
    .style("fill", function(d) { return color(d.target.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
</code></pre>

<p>How is it that <code>.attr("d", ribbon)</code> knows how to pass in the chord data to ribbon? Is this just part of D3 magic that I have to just remember?</p>