title: D3.js - what is selection.call() returning?
body: <p>I'm currently working on a force simulation. <a href="https://jsfiddle.net/wau405av/3/" rel="nofollow noreferrer">Here's the fiddle</a> if you need it. This particular section is giving me a bit of trouble - I'm trying it for links and not nodes, where the situation is similar, so we can see the difference of working and non-working:</p>
  
  <pre><code>function linkRender(selection) {
      selection
          .data(links)
          .enter().append("line")
          .attr("stroke-width",2)
          .attr("stroke","black")
  }
  let link = svg.selectAll("line").call(linkRender);
  </code></pre>
  
  <p>Here, <code>call()</code> is supposed to return the selection, that is, the link lines. However, when rendering links in <code>selection.on()</code>, if I use the <code>link</code> variable to work with, it doesn't render properly, much to my distress:</p>
  
  <pre><code>simulation.on("tick",byFrame);
  function byFrame() {
      // This doesn't work!
      link
          .attr("x1", d =&gt; d.source.x )
          .attr("y1", d =&gt; d.source.y )
          .attr("x2", d =&gt; d.target.x )
          .attr("y2", d =&gt; d.target.y )
  
      // But this works!
      svg.selectAll("circle")
          .attr("cx",d =&gt; d.x )
          .attr("cy",d =&gt; d.y )
  }
  </code></pre>
  
  <p>And if I assign the <code>link</code> variable to <code>linkRender()</code> the old way, that is,</p>
  
  <pre><code>let link = linkRender(svg.selectAll("line"))
  </code></pre>
  
  <p>as long as I set <code>linkRender()</code> to return the code inside (<code>return selection.data(links).etc</code>), the rendering works fine.</p>
  
  <p>Finally, here's a comparison of <code>link</code> and <code>svg.selectAll("line")</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/gIhMp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gIhMp.png" alt="enter image description here"></a></p>
  
  <p>So I'd love to know what is going on. Thanks in advance!</p>