为什么这一块Javascript（D3）工作，但不是其他的？

Question

我不知道我是不是理解Javascript特定的东西，或者如果我不了解D3应该怎么做。

我只是试图创造产生这些的可重用的方式：http://bl.ocks.org/mbostock/5100636

下面的作品就好了：

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); 
      }; 
     }); 
    } 

} 

但是当我尝试和正确原型的一切到的功能，它停止工作：

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); 
      }; 
     }); 
    } 
} 

问题都在于“return this.arc（d）”这一刻。我这样的数百个错误：

Error: Problem parsing d="MNaN,NaNA160,160 0 1,1 114.55205494059831,-111.70419288856652L71.59503433787394,-69.81512055535408A100,100 0 1,0 NaN,NaNZ"

我在这里不理解什么？这不像它没有看到变量'this.arc'。为什么当我将arc声明为变量，并且在后一种情况下不起作用时，一切都会奏效？

Answer 1

this.arc函数里面的函数，不是你的ArcGraph的this.arc。

检查了这一点：http://jsfiddle.net/58wTN/