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

问题都在于“回归这个.c（d）”时刻。我有数百个这样的错误：

错误：解析问题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不是this.arc的{{1}}。

检查出来：http://jsfiddle.net/58wTN/

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

1 个答案: