为什么这一块Javascript（D3）可以工作，而另一块不行？

我不知道我是否不理解特定于Javascript的东西，或者我是否不理解D3应该如何做事情

我只是尝试创建一种可重用的方法来生成这些：

以下几点效果不错：

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

问题在于“返回此弧（d）”时刻。我发现了数百个这样的错误：

错误：解析问题d=“MNaN，NANA160160 0 1,1 114.55205494059831，-111.70419288856652L71.59503433787394，-69.8151205555408A10100 1,0 NaNZ”

---

我在这里不明白什么？它并不是没有看到变量“this.arc”。为什么当我将arc声明为变量时一切都会工作，而在后一种情况下不工作？

函数中的this.arc

在方法中，不是

ArcGraph

的

this.arc

---

检查此项：

Gotcha-从函数中访问'parent'this.arc元素的正确方法是什么？您应该以某种方式将

ArcGraph

的父实例传递给

arcTween

函数。请参见此修改的小提琴：