D3.js 转换多个弧路径答案

【问题标题】：D3.js transitioning multiple arc pathsD3.js 转换多个弧路径
【发布时间】：2013-12-09 21:04:00
【问题描述】：

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

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

我想知道是否有人知道我在哪里遗漏了什么以及如何解决此错误。

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

【问题讨论】：

标签： javascript animation d3.js data-visualization

【解决方案1】：

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

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

修改 jsfiddle here.

【讨论】：