D3.js转换多个ARC路径
问题描述:
我有一个测试用例使用arcTween功能动画多弧工作,但事情是,我得到时引发的每个圆弧过渡通话D3.js转换多个ARC路径
错误的错误:问题解析d =“M0,-52.5A52.5,52.5 0 1,1 NaN,NaNLNaN,NaNA42.5,42.5 0 1,0 0,-42.5Z”
我想知道是否有人知道我在哪里丢失东西,如何解决这个错误。
继承人的小提琴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);
};
});
}
答
的问题是,最初的endAngle
未设置。这意味着首先计算弧路径将返回NaN
值。要修正,简单地初始化endAngle
为0
arc.each(function(d) { d.endAngle = 0; });
改性的jsfiddle here。