Question

我有一个测试用例，用于使用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);
        };
    });
}

Answer 1

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

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

修改了jsfiddle here。

D3.js过渡多个弧形路径

1 个答案: