d3 przejście z baru do tortu iz powrotem

Question

LIVE DEMO

Więc mam to przekonanie, że wszystkie pojedyncze dane osi powinno być dozwolone wyświetlane we wszystkich podstawowych formach; a przynajmniej od tortu do baru. Idealnie byłoby to animowane przejście, ale to była trudność.

Uzyskanie wykresu kołowego do pracy jest łatwe, tak jak uzyskanie wykresu słupkowego. Oto co mam do tej pory:

# fields 
width = 750 
height = width/2 
margin = 20 
radius = (height-(margin*2))/2 

# helpers 
pie  = d3.layout.pie().value (d) -> d 
arc  = d3.svg.arc() 
    .outerRadius(radius) 
    .innerRadius(radius/4) 
x  = d3.scale.linear().domain([0, 100]).range [0, width] 

$http.get('/Classification_Top_10_by_Count.json').success (data) -> 

    percents = (parseFloat item.Percent for item in data).sort d3.ascending 

    svg  = d3.select('#svgStage').append('svg')   
     .attr('width', width+(margin*2)) 
     .attr('height', height+(margin*2)) 

    svg.data([percents]) 

    g = svg.append('g') 
     .attr('transform', "translate(#{radius},#{radius})") 

    paths = g.selectAll 'path' 

    paths.data(pie).enter().append('path') 
     .attr('d', arc) 

    toBars = -> 
     g.selectAll('path').transition().duration(2000) 
      .attr 'd', (d, index) -> 
       # this is over complex because I was playing with it. 
       cord = 
        tl : [0,   index*20] 
        tr : [d.value*20, index*20] 
        br : [d.value*20, index*20-20] 
        bl : [0,   index*20-20] 
       oCord = [ 
        cord.tl 
        cord.tr 
        cord.br 
        cord.bl 
       ] 
       "M #{oCord[0][0]}, #{oCord[0][2]} 
       A 0, 0 0 0, 0 #{oCord[1][0]}, #{oCord[1][3]} 
       L #{oCord[2][0]}, #{oCord[2][4]} 
       A 0, 0 0 0, 0 #{oCord[3][0]}, #{oCord[3][5]} 
       Z" 

Oczywiście to zadziałało jego elementu musi być ścieżka do elementu ścieżki, a przejście pracuje teraz. Problem polega na tym, że wygląda na bzdura. W momencie, gdy się zaczyna, wygląda na zniekształconą, aż do końca i staje się przyzwoitym wykresem słupkowym.

Patrzyłem na to: http://d3-example.herokuapp.com/examples/showreel/showreel.html Co pokazuje pasek przechodzący do pączka w sposób, w jaki chciałbym. Patrząc na kod źródłowy, odbywa się to za pomocą niestandardowej animacji. (zobacz wiersz źródłowy 518)

Teraz jestem w mojej głowie. Co tu się dzieje? Jak mogę uruchomić to przejście? Czy ktoś inny radził sobie z tym problemem?

---

UPDATE

Wystarczy być jasne, poniżej ilustracjami intencją mojego abit przejściowym jaśniej.

---

Bounty klarowność. Dodałem nagrodę do tego pytania, ponieważ potrzebuję wyjaśnienia, co się stało. Superboggly to zrobił, więc dostał nagrodę. Jednak podejście Amit Aviv jest lepsze, więc akceptuję jego odpowiedź jako najbardziej poprawną. Mam również +1.

Answer 1

Oto moje zdanie: http://jsfiddle.net/amitaviv99/x6RWs/42/

Moje podejście było zbliżenie obu łuków & bary przy użyciu sześciennych krzywych Beziera, z dokładnie taką samą liczbą punktów kontrolnych. Kod jest nieco skomplikowany i wymaga trochę pracy. Ale wynik jest dość gładki.

Oto fragment (SO wymaga ..)

var bezierArc = function(radiusIn, radiusOut, startAngle, endAngle){ 
    var arcIn = makeCompArc(radiusIn, startAngle, endAngle); 
    var arcIOut = makeCompArc(radiusOut, startAngle, endAngle); 
    var lines = makeBezierDoubleLine(radiusIn, radiusOut, startAngle, endAngle); 
    var path = [arcIn, lines[0], arcOut, lines[1]].join(' '); 

    return path; 
} 

Answer 2

D3 radzi sobie całkiem dobrze z interpolacją między ścieżkami, ale miał problemy z oryginałem przed i po ścieżce, więc zamiast samodzielnie przejmować cały proces tworzenia klatek, pomyślałem, że może uda nam się wymyślić lepsze ścieżki, praca jest łatwiejsza dla D3. Mój result.

Pierwszą rzeczą jest spojrzenie na element ścieżki svg. Zasadniczo wygląda to następująco:

A rx,ry a f1,f2 x,y 

możesz przeczytać szczegóły here. To narysuje łuk z dowolnego miejsca (poprzednia ostatnia współrzędna) do współrzędnych x, y. Ale na tym skupiamy się na tym, że pierwsze dwie cyfry to sugerowane promienie elipsy, a ostatnia część przed współrzędnymi końcowymi, które oznaczono jako f1, f2, są flagami, więc nie można ich interpolować.

Tak więc głównym niesamowitość w przejściu od kodzie dlatego staramy się interpolacji między

rx, ry, 0 0,

0,0 0 0 0

Natychmiast zobaczysz płynniejsze przejście, jeśli ustawisz ścieżkę końcową na A0,0 0 0,1 w jednym przypadku.

Aby elementy lepiej pasowały do ​​siebie, animowałem wewnętrzny promień koła, tak aby segmenty wyglądały bardziej jak pręty, ale zakrzywione, a następnie pozwoliłem D3 wykombinować przejście od krzywej do paska, ale bez przełączania flagi łuku . Następnie chcesz, aby paski miały płaskie końce. Ścieżka będzie miała bardziej płaski łuk, jeśli zwiększysz sugerowane promienie elips! Więc po prostu użyłem 100,100. Moja ostatnia przejście do ścieżki dla barów wygląda następująco:

"M " + oCord[0][0] + "," + oCord[0][1] + 
"A100,100 0 0,1 " + oCord[1][0] + "," + oCord[1][1] + 
"L " + oCord[2][0] + "," + oCord[2][1] + 
"A100,100 0 0,0 " + oCord[3][0] + "," + oCord[3][1] + 
"Z"; 

wtedy faktycznie, właściwie, spłaszczyć punkty końcowe mam przejściowego (biegną szeregowo) do zera segmenty łuku drogi. Podejrzewam, że istnieje lepszy sposób na wykonanie tego rodzaju czyszczenia przy przejściach D3, ale działa także przejście o czasie trwania 0.

Aby uzyskać dobry dostęp do rewersu, ustawiłem ścieżki od spłaszczonych łuków z góry. Posiadanie dużego promienia i poprawne flagi oznacza, że ​​obliczone przez D3 przejście z powrotem do wykresu pączków działa dobrze. Wtedy po prostu animuję wewnętrzny promień z powrotem.