d3 Übergang von Bar zu Pie und zurück
Ich habe also die Vorstellung, dass alle Einzelachsendaten auf allen grundlegenden Arten angezeigt werden dürfen; und zumindest von einem Kuchen zu einer Bar. Idealerweise wäre dies ein animierter Übergang, aber das ist die Schwierigkeit, die kommt.
Es ist ganz einfach, ein Tortendiagramm zu erstellen und ein Balkendiagramm zu erstellen. Hier ist, was ich bisher habe:
%Vor%Damit dies funktioniert, muss es natürlich Pfadelement zu Pfadelement sein, und der Übergang funktioniert jetzt. Problem ist, es sieht wie Mist aus. In dem Moment, in dem es beginnt, sieht es verstümmelt aus, bis es vorbei ist und ein anständiges Balkendiagramm wird.
Ich habe mir folgendes angesehen: Ссылка Was zeigt, dass eine Bar zu einem Donut übergeht, so wie ich es möchte. Betrachtet man den Quellcode, wird dies durch ein benutzerdefiniertes Tween erreicht. (siehe Quellzeile 518)
Jetzt bin ich in meinem Kopf. Was geht hier vor sich? Wie kann ich diesen Übergang zur Arbeit bekommen? Hat jemand anders da draußen mit diesem Problem zu tun?
AKTUALISIEREN
Nur um klar zu sein, unter den Abbildungen ist die Absicht meines Übergangs deutlicher.
Kopfgeldklarheit. Ich habe dieser Frage ein Kopfgeld hinzugefügt, weil ich eine Erklärung dafür brauche, was falsch gelaufen ist. Superbogly hat das gemacht, also hat er das Kopfgeld bekommen. Der Ansatz von Amit Aviv ist jedoch überlegen, daher akzeptiere ich seine Antwort als die korrekteste. Ich habe auch beides getan.
2 Antworten
Hier ist meine Meinung: Ссылка
Mein Ansatz war, sowohl die Lichtbögen als auch den Lichtbogen anzunähern. Balken mit kubischen Bezierkurven, mit genau der gleichen Anzahl von Kontrollpunkten. Der Code ist etwas kompliziert und benötigt etwas Arbeit. Aber das Ergebnis ist ziemlich glatt.
Hier ist ein Auszug (SO erfordert ..)
%Vor%D3 kann ziemlich gut zwischen den Pfaden interpolieren, hatte aber Probleme mit dem ursprünglichen Pfad vor und nach dem Pfad. Anstatt den gesamten Tweening-Prozess selbst zu übernehmen, dachte ich, wir könnten bessere Wege finden, um den Job zu machen einfacher für D3. Mein Ergebnis .
Als Erstes sehen Sie sich das Element svg arc path an. Es geht im Prinzip so:
%Vor%Sie können die Details hier lesen. Dies wird einen Bogen von wo auch immer Sie sind (vorherige Endkoordinate) zu den Koordinaten x, y zeichnen. Aber die Dinge, auf die man sich konzentrieren muss, sind, dass die ersten beiden Zahlen die implizierten Ellipsenradien sind und der letzte Teil vor den Endkoordinaten, die ich als f1, f2 markiert habe, sind Flags und daher nicht interpolierbar .
Die Hauptschwierigkeit beim Übergang von Ihrem Code liegt also darin, dass Sie versuchen, zwischen
zu interpolierenA rx, ry, 0 0, 1
A 0,0 0 0, 0
Sie werden sofort einen glatteren Übergang sehen, wenn Sie in einem Fall Ihren Endpfad auf A0,0 0 0,1 setzen.
Um die Teile ein wenig besser zusammenzubringen, animierte ich den inneren Radius des Kuchens, so dass die Segmente eher wie die Balken aussahen, aber gekrümmt, dann ließ ich D3 den Übergang von Kurve zu Balken berechnen, ohne das Lichtbogen-Flag zu wechseln. Dann möchten Sie, dass die Balken flache Enden haben. Der Pfad wird einen flacheren Bogen haben, wenn Sie die impliziten Ellipsenradien erhöhen! Also habe ich einfach 100.100 benutzt. Mein endgültiger Übergang zum Pfad für die Balken sieht folgendermaßen aus:
%Vor%Dann, um die Endpunkte richtig zu glätten, habe ich einen zweiten Übergang (sie laufen seriell), um die Arc-Segmente des Pfads auf Null zu setzen. Ich vermute, es gibt eine bessere Möglichkeit, diese Art der Bereinigung mit D3-Übergängen durchzuführen, aber ein Übergang mit der Dauer 0 funktioniert auch.
Um das Gegenteil zu erreichen, stelle ich die Pfade zu den abgeflachten Bogenkurven von oben her ein. Mit dem großen Radius und den richtigen Flags funktioniert der D3-berechnete Übergang zurück zum Donut-Diagramm gut. Dann animiere ich einfach den inneren Radius wieder raus.
Tags und Links animation coffeescript d3.js