Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript D3.js需要逐步设置(扫描)弧的动画_Javascript_Svg_D3.js_Interpolation - Fatal编程技术网

Javascript D3.js需要逐步设置(扫描)弧的动画

Javascript D3.js需要逐步设置(扫描)弧的动画,javascript,svg,d3.js,interpolation,Javascript,Svg,D3.js,Interpolation,我正在尝试在圆内设置圆弧动画。一切都很好,除了我想从开始到结束的角度为圆弧设置动画,就好像它是绘制的一样。我已经搜索过了,找到了d3.interpolate。但不知何故,我没能成功 data= { "candidate": [ { "percentage": 33 }, { "percentage": 10 }, { "percentag

我正在尝试在圆内设置圆弧动画。一切都很好,除了我想从开始到结束的角度为圆弧设置动画,就好像它是绘制的一样。我已经搜索过了,找到了d3.interpolate。但不知何故,我没能成功

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

    };

}

你看到了吗?谢谢。我从中得到了很多帮助。。只有一件事是,当返回函数tweenArc时,会出现问题,即调用arc。所以这里我得到的是数据“d”,而不是索引“I”。为什么?我不知道我是否明白你的意思。在什么情况下你需要索引?如果你看弧函数,我用索引值“I”来计算内外半径。它工作正常,并给出索引值,直到调用TweenArc。之后,我没有得到数据“d”,但没有得到索引“I”。我希望我能解释一下。你有没有试过简单地将
I
参数添加到提供数据的函数中?