2

我正在尝试为圆圈内的弧设置动画。一切工作正常，除了我想从开始到结束角度为弧设置动画，就好像它被绘制一样。我已经搜索过了，找到了 d3.interpolate for this thing 。但不知何故，我无法做到。

data=
{
    "candidate": [
        {
            "percentage": 33
        },
        {
            "percentage": 10
        },
        {
            "percentage": 44
        },
        {
            "percentage": 58
        },
        {
            "percentage": 88
        }
    ]
};

var C_radius = 150;

C_axes = vizBody.selectAll('.circle-ticks')
        .data(data.candidate)
        .enter().append('svg:g')
        .attr("class", function (d,i) { return "circle-ticks"+i;});

    //var totalLength = path.node().getTotalLength();

    C_axes.append('svg:circle')
            .attr("cx",0)
            .attr("cy",0)
            .attr("r", function (d, i) {
                return C_radius-(i*20);
            })
            .attr("class",function (d, i) { return "circle"+i;})
            .transition()
            .duration(500)
            .style("stroke", "#A1A1A1")
            .style("stroke-dasharray", ("5, 5"))
            .style("fill","white");


    C_axes.append("svg:text")
            .attr("class",function(d,i){ return "student_name"+i })
            .attr("x",0)
            .attr("y", 0)
            .text(data.percentage)
            .attr("text-anchor", "middle");

            Px = 0;

            arc = d3.svg.arc()
                        //.interpolate("cardinal")
                        .innerRadius( function (d,i) { return (C_radius-(i*20)); })
                        .outerRadius( function (d,i) { return ((C_radius-(i*20))-20); })
                        .startAngle(Px * (Math.PI/180))     //converting from degs to radians
                        .endAngle(function (d,i) { console.log("d=>"+d);return arc_endangle(data.circles[i].percentage, i); });     //just radians

            C_arc = C_axes.append("path")
            .attr("class" , function (d,i){ return "path"+i;})
            .attr("d", arc)
            //.attr("stroke" , "gray")
            .attr("fill", "white");

            d3.selectAll("g.arc > path")
               .each(arcTween);


    function arc_endangle(angle, i)
    {
        console.log("val"+i+"=>"+angle);
        var new_angle = 360*(angle/100);
        var cal_angle = new_angle*(Math.PI/180);
        //cal_angle = 4;
        console.log("calculated_angle"+i+"=>"+cal_angle);
        return cal_angle;
    }

    function arcTween(){
    //console.log(this);
    d3.select(this)
        .transition().duration(2500)
        .attr("stroke",function (d,i) { console.log(i);return color(i);})
        .style("fill", function (d,i) { return color(i);})
        .attrTween("d", tweenArc({ percentage : 0 }));
}

function tweenArc(b) {
    //console.log("s=>"+s);
    //j++;
      return function(a) { //console.log(a);

        var i = d3.interpolate(b, a);
        for (var key in b) a[key] = b[key];  // update data
        return function(t) { 
              return arc(i(t));
        };

    };

}
4

0 回答 0