title: How to chain a function call in D3?
body: <p>Defined a draw function in order to reuse, but it's standalone statement. </p>
  
  <pre><code>draw(circles);
  </code></pre>
  
  <p>Is there a way to put (rewrite) draw function back to D3's function chain?</p>
  
  <pre><code>svg.selectAll("circle")
              .data(dataset)
              .enter()
              .append("circle")
              .draw(???) //not work. 
  </code></pre>
  
  <p>Here is the code. a working version is <a href="http://jsfiddle.net/a9drkzje/" rel="nofollow">here</a></p>
  
  <pre><code>&lt;body&gt;
      &lt;script type="text/javascript"&gt;
  
          var draw = function (circles) {
              circles.attr("cx", function (d, i) {
                  return (i * 50) + 25;
              })
           .attr("cy", h / 2)
           .attr("r", function (d) {
              return d;
           });
          };
  
          var w = 500, h = 50;
  
          var dataset = [5, 10, 15, 20, 25];
          var dataset2 = [25, 20, 15, 10, 5];
  
          var svg = d3.select("body")
                      .append("svg")
                      .attr("width", w)
                      .attr("height", h);
  
          var circles = svg.selectAll("circle")
              .data(dataset)
              .enter()
              .append("circle")
  
          draw(circles);
  
          var circles2 = svg.selectAll("circle")
          .data(dataset2)
          .transition()
          .duration(2000);
  
          draw(circles2);
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>