爲什麼這一塊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/