Animieren D3 Donut-Diagramm auf Last

Question

Ich habe ein Donut-Diagramm mit fünf verschiedenen Bögen darin. Die Daten werden nicht aktualisiert, aber ich möchte einen Übergang des gesamten Graphen haben, der beim Laden der Seite als Kreis gezeichnet wird, beginnend mit dem ausgewählten Winkel (in meinem Fall 1,1 * PI). Hier ist die jsfiddle des Graphen: http://jsfiddle.net/Nw62g/

var data = [ 
    {name: "one", value: 10375}, 
    {name: "two", value: 7615}, 
    {name: "three", value: 832}, 
    {name: "four", value: 516}, 
    {name: "five", value: 491} 
]; 

var margin = {top: 20, right: 20, bottom: 20, left: 20}; 
    width = 400 - margin.left - margin.right; 
    height = width - margin.top - margin.bottom; 

var chart = d3.select("body") 
    .append('svg') 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + ((width/2)+margin.left) + "," + 
             ((height/2)+margin.top) + ")"); 

var radius = Math.min(width, height)/2; 

var color = d3.scale.ordinal() 
    .range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]); 

var arc = d3.svg.arc() 
    .outerRadius(radius) 
    .innerRadius(radius - 20); 

var pie = d3.layout.pie() 
    .sort(null) 
    .startAngle(1.1*Math.PI) 
    .endAngle(3.1*Math.PI) 
    .value(function(d) { return d.value; }); 

var g = chart.selectAll(".arc") 
    .data(pie(data)) 
    .enter().append("g") 
    .attr("class", "arc"); 

g.append("path") 
    .style("fill", function(d) { return color(d.data.name); }) 
    .attr("d", arc); 

Wie würde ich mich über dieses Ergebnis zu erreichen?

Answer 1

Sie können dies mit einem Attribute Tweens:

.attrTween('d', function(d) { 
    var i = d3.interpolate(d.startAngle+0.1, d.endAngle); 
    return function(t) { 
     d.endAngle = i(t); 
    return arc(d); 
    } 
}); 

Dieses belebt das Segment vom Anfang bis zum Ende Winkel. Um dies zu tun über den gesamten Kreis, können Sie verzögerten Übergänge verwenden:

.transition().delay(function(d, i) { return i * 500; }).duration(500) 

Komplettes Beispiel here. Sie können Startsegment, Dauer usw. nach Ihren Wünschen anpassen.