animation - porcentaje - Animar D3 gráfico de anillos en la carga

los mejores graficos de anillos

Question

Tengo una tabla de anillos con cinco arcos diferentes dentro de ella. Los datos no se actualizarán, pero quiero que se dibuje una transición de todo el gráfico como un círculo cuando se carga la página, comenzando en el ángulo seleccionado (en mi caso 1.1 * PI). Aquí está el jsfiddle del gráfico: 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);

¿Cómo voy a lograr este resultado?

Answer 1

Puedes hacer esto con una interpolación de atributo:

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

Esto anima el segmento de principio a fin de ángulo. Para hacer esto en todo el círculo, puedes usar transiciones retrasadas:

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

Completa el ejemplo here . Puedes ajustar el segmento de inicio, la duración, etc. a tu gusto.