title: Why does this one block of Javascript (D3) work, but not the other?
body: <p>I can't tell if I'm not understanding something Javascript-specific, or if I'm not understanding how D3 is supposed to does things. </p>
  
  <p>I'm simply trying to create a reusable way of generating these: <a href="http://bl.ocks.org/mbostock/5100636" rel="nofollow">http://bl.ocks.org/mbostock/5100636</a></p>
  
  <p>The following works just fine:</p>
  
  <pre><code>function ArcGraph(selector, color) {
  
      this.width = 80;
      this.height = 80;
  
      var arc = d3.svg.arc().innerRadius(25).outerRadius(40).startAngle(0);
      var svg = d3.select("body').append("svg").attr("width", this.width).attr("height", this.height).append("g").attr("transform", "translate(" + this.width * .5 + "," + this.height * .5 + ")");
      this.background = svg.append("path").datum({endAngle: tau}).style("fill", "#f5f8fd").attr("d", arc);
      this.foreground = svg.append("path").datum({endAngle: .127 * tau}).style("fill", color).attr("d", arc);
  
      this.foreground.transition().duration(750).call(arcTween, Math.random() * tau);
  
      function arcTween(transition, newAngle) {
          transition.attrTween("d", function(d) {
              var interpolate = d3.interpolate(d.endAngle, newAngle);
              return function(t) {
                  d.endAngle = interpolate(t);
                  return arc(d);
              };
          });
      }
  
  }
  </code></pre>
  
  <p>But when I try and properly prototype it everything into functions, it stops working:</p>
  
  <pre><code>function ArcGraph(selector, color) {
  
      this.width = 80;
      this.height = 80;
  
      this.arc = d3.svg.arc().innerRadius(25).outerRadius(40).startAngle(0);
      this.svg = d3.select("body').append("svg").attr("width", this.width).attr("height", this.height).append("g").attr("transform", "translate(" + this.width * .5 + "," + this.height * .5 + ")");
      this.background = this.svg.append("path").datum({endAngle: tau}).style("fill", "#f5f8fd").attr("d", this.arc);
      this.foreground = thus.svg.append("path").datum({endAngle: .127 * tau}).style("fill", color).attr("d", this.arc);
  
  }
  
  ArcGraph.prototype.renderArc = function() {
  
      this.foreground.transition().duration(750).call(arcTween, Math.random() * tau);
  
      function arcTween(transition, newAngle) {
          transition.attrTween("d", function(d) {
              var interpolate = d3.interpolate(d.endAngle, newAngle);
              return function(t) {
                  d.endAngle = interpolate(t);
                  return this.arc(d);
              };
          });
      }
  }
  </code></pre>
  
  <p>The problem all lies in the "return this.arc(d)" moment. I hundreds of errors like this:</p>
  
  <blockquote>
    <p>Error: Problem parsing d="MNaN,NaNA160,160 0 1,1 114.55205494059831,-111.70419288856652L71.59503433787394,-69.81512055535408A100,100 0 1,0 NaN,NaNZ"</p>
  </blockquote>
  
  <p>What am I not understanding here? It's not like it doesn't see the variable 'this.arc'. Why would everything work when I declare arc as a variable, and not work in this latter case?</p>