Pytanie Animowanie wykresu pączka D3 przy obciążeniu


Mam tabelę pączków z pięcioma różnymi łukami wewnątrz niej. Dane nie zostaną zaktualizowane, ale chcę mieć przejście całego wykresu rysowanego w kółko po załadowaniu strony, zaczynając od wybranego kąta (w moim przypadku 1.1 * PI). Oto jsfiddle wykresu: 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);

Jak chciałbym osiągnąć ten wynik?


19
2017-12-10 17:21


pochodzenie




Odpowiedzi:


Możesz to zrobić za pomocą animacji atrybutów:

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

To animuje segment od początku do końca kąta. Aby to zrobić w całym kręgu, możesz użyć opóźnionych przejść:

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

Kompletny przykład tutaj. Możesz dostosować początkowy segment, czas trwania itp. Do własnych upodobań.


29
2017-12-10 18:30



Dziękuję za odpowiedź! Po wypróbowaniu swojej drogi doszedłem do innego rozwiązania, które jest bardziej tego, czego szukałem, ale twój przykład zdecydowanie pomógł! Oto mój ostateczny kod:jsfiddle.net/Nw62g/3 - KobeBryant
Och, widzę, czego teraz szukałeś. Cieszę się, że i tak pomogło. - Lars Kotthoff
@LarsKotthoff, jeśli chciałbyś zmienić kierunek animacji, jak byś to zrobił? - thetallweeks
Najłatwiej jest po prostu odwrócić złagodzenie (out-in). - Lars Kotthoff