D3.js переходящие несколько путей дуги

у меня есть тест, работающий для анимации нескольких дуг с помощью функции arcTween, но дело в том, что я получаю сообщение об ошибке, которое выдается для каждой дуги перехода вызоваD3.js переходящие несколько путей дуги

Ошибка: Проблема синтаксического анализа д = "M0, -52,5A52,5,52,5 0 1,1 NaN, NaNLNaN, NaNA42,5,42,5 0 1,0 0, -42,5Z"

Мне было интересно, знает ли кто-нибудь, где я чего-то не хватает, как исправить эту ошибку.

Heres скрипка 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); 
     }; 
    }); 
}

источник

2013-12-09 swallace

Проблема заключается в том, что на начальном этапе, endAngle не установлен. Это означает, что самое первое вычисление дуговых путей вернет значения NaN. Чтобы исправить, просто инициализирует endAngle до 0.

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

Модифицированный jsfiddle here.

источник

2013-12-09 21:23:09

D3.js переходящие несколько путей дуги

ответ

Смежные вопросы