title: d3 arc creation not working with data binding
body: <p>I am new into D3 and Javascript and I m trying to figure out why this code is not working. the error seems to be in the last anonymous function.Replacing it with <code>a</code> works</p>
  
  <p>Any suggestion?</p>
  
  <pre><code>var pi = Math.PI;
  var cornerRadius = 20;
  var spaceAngle = 10
  
  var percents = [40, 60, 76]
  
  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
  function deriveArcs(angle, i) {
      var arc = d3.svg.arc()
          .innerRadius(180 + i * spaceAngle)
          .outerRadius(240 + i * spaceAngle)
          .cornerRadius(cornerRadius)
          .startAngle(-pi * 0.5)
          .endAngle(-pi * 0.5 + angle / 100 * pi);
      return arc;
  }
  
  var a = deriveArcs(30, 0)
  
  g.selectAll("path")
      .data(percents)
      .enter()
      .append("path")
      .attr("d",
          function(d, i) {
              console.log(d+" "+i)
              var aa = deriveArcs(d, i);
              return aa;
          }
      );
  </code></pre>
  
  <p>Error in chrome :</p>
  
  <blockquote>
    <p>d3.min.js:1 Error:  attribute d: Expected moveto path command ('M' or 'm'), "function n(){var…".
        a @ d3.min.js:1
        (anonymous) @ d3.min.js:3
        Y @ d3.min.js:1
        Aa.each @ d3.min.js:3
        Aa.attr @ d3.min.js:3
        (anonymous) @ pie.js:30
        pie.js:32 60 1</p>
  </blockquote>