1
在下面的代碼中,甜甜圈圖是動畫的,以便開始從一個角度開始形成角度並以一個終止角度結束。我如何使甜甜圈的文字標籤 動畫與圖表一起流動(即從起始角度到結束角度)?目前所有的文本標籤都集中在中間,然後移出到相應弧線的中心。如何動畫標籤以d3中的開始角度和結束角度與圓環圖流動。
var width = 960,
height = 500,
radius = Math.min(width, height)/2;
var grad=Math.PI/180;
var color = d3.scale.ordinal().range(["#24b4d1", "#b1da42", "#fede17", "#d0164a","#ef5822"]);
var segmentVal=[20,20,20,20,20];
//this is the label i want to flow along with the donut chart
var segments=["1","2","3","4","long one"];
var name="center>>>";
var arc = d3.svg.arc().outerRadius(radius - 5).innerRadius(radius - 150);
var pie=d3.layout.pie().startAngle(-30*grad).endAngle(330*grad);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var g = svg.selectAll(".arc")
.data(pie(SegmentVal))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("fill", function(d, i) { return color(i); })
.transition()
.ease("exp")
.ease("bounce")
.duration(2500)
.delay(function(d,i) { return i*10;})
.attrTween("d", tweenPie);
function tweenPie(b)
{
var i = d3.interpolate({startAngle: -30*grad, endAngle: -31*grad}, b);
return function(t) { return arc(i(t)); };
}
var text=g.append("text")
.transition()
.duration(1500)
.attr("transform",function(d){return "translate("+arc.centroid(d) +")";})
.text(function(d,i) { return beepSegments[i] })
.attr("dy",10)
.attr("text-anchor", "middle");
var holder=svg.selectAll("text")
.data(name)
.enter()
.append("text")
.attr("x","-350")
.attr("y","-200")
.style("text-anchor","middle")
.text(name);
holder.transition().attr("y","5");
holder.transition()
.delay(500)
.ease("bounce")
.duration(1000)
.attr("x","0")
.attr("y","5");
非常感謝。這完全工作.. – sruti