防止JS类方法运行直到设置变量

时间:2016-03-04 17:42:56

标签: javascript oop d3.js svg

我正在使用OO JavaScript,我正在尝试为我的类实现一个接口,如D3

var object = ObjectType
   .property1(value)
   .property2(value)

我的类构建2个SVG弧(一个用于背景,一个用于值),但由于我设置的方式,它是在其值初始化之前构建的。我真的想用我上面描述的模式构建,但我找不到合适的资源。

var tempArc = new AnnularSection(-90, 90, 120, 140);
   .valueColor = "#77933c";


function AnnularSection(startAngle, endAngle, moveRight, moveDown) {
    this.startAngle = startAngle * Math.PI/180;
    this.endAngle    = endAngle * Math.PI/180;
    this.moveRight  = moveRight;
    this.moveDown   = moveDown;
    this.valueColor;

    this.section = d3.svg.arc()
        .innerRadius(93)
        .outerRadius(118)
        .startAngle(this.startAngle)
        .endAngle(this.endAngle);

    svg.append("path")
        .attr("class", "arc")
        .attr("d", this.section)
        .attr("transform", "translate(" + moveRight + "," + moveDown + ")");

    this.valueArc = d3.svg.arc()
        .innerRadius(93)
        .outerRadius(118)
        .startAngle(this.startAngle)
        .endAngle(this.endAngle);

    this.value = svg.append("path")
        .attr("fill", this.valueColor)
        .attr("d", this.valueArc)
        .attr("transform", "translate(" + moveRight + "," + moveDown + ")");

    this.updateValue = function (newEnd) {

        console.log(this);

        this.valueArc.transition().duration(750).call(arcTween, newEnd);

        function arcTween(transition, newEnd) {
            transition.attrTween("d", function(d) {
                var interpolateEnd = d3.interpolate(d.endAngle, endAngle);
                return function(t) {
                    d.endAngle = interpolateEnd(t);
                    return arc(d);
                };
            });
        }
    }
}

0 个答案:

没有答案