javascript - D3.js 过渡多个弧路径

Question

我有一个测试用例，用于使用 arcTween 函数对多个弧进行动画处理，但问题是我收到每个弧转换调用都会引发的错误

错误:解析时出现问题 d="M0,-52.5A52.5,52.5 0 1,1 NaN,NaNLNaN,NaNA42.5,42.5 0 1,0 0,-42.5Z"

我想知道是否有人知道我在哪里遗漏了某些内容以及如何修复此错误。

这是 fiddle http://jsfiddle.net/XuhVa/

var dataset = [
{
    "vendor-name":"HP",
    "overall-score":45
},
{
    "vendor-name":"CQ",
    "overall-score":86
},
{
    "vendor-name":"Tridion",
    "overall-score":73
},
{
    "vendor-name":"Sharepoint Server",
    "overall-score":99
},
{
    "vendor-name":"Drupal",
    "overall-score":24
},
{
    "vendor-name":"SiteCore",
    "overall-score":57
}
];

var width = 105
    , height = 105
    , innerRadius = 85;

var drawArc = d3.svg.arc()
    .innerRadius(innerRadius/2)
    .outerRadius(width/2)
    .startAngle(0);

var s = d3.selectAll('.score')
    .data( dataset )
    .enter()
    .append('svg')
    .attr('width', width)
    .attr('height', height)    
    .append('g')
    .attr("transform", "translate(" + width/2  + "," + height/2  + ")");

//creating background circle
s.append("circle")
    .attr("fill", "#ffffff")
    .attr("stroke", "#dfe5e6")
    .attr("stroke-width", 1)
    .attr('r', width / 2);

//creating arc path
var arc = s.append("path")
    .attr("fill", "#21addd")
    .attr('class', 'arc')
    .attr('d', drawArc);

//transition arc path from start angle to end angle
arc.transition()
    .duration(750)
    .delay(300)
    .ease('bounce')
    .call(arcTween, this );

//percentage value
s.append('text')
    .text(function(d){
        return d['overall-score'];
    })
    .attr("class", "perc")
    .attr("text-anchor", "middle")
    .attr('font-size', '36px')                        
    .attr("y", +10);


function arcTween(transition, newAngle) {

    transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate( 0, 360*( d['overall-score']/100) * Math.PI/180    );

        return function(t) {

            d.endAngle = interpolate(t)

            return drawArc(d);
        };
    });
}

Answer 1

问题是最初没有设置endAngle。这意味着弧路径的第一次计算将返回 NaN 值。要修复此问题，只需将 endAngle 初始化为 0。

arc.each(function(d) { d.endAngle = 0; });

修改jsfiddle here .