Spezielles Donut-Diagramm mit verschiedenen Ringen / Bögen für positive und negative Werte
Ich versuche, eine spezielle Art von Donut-Diagramm in D3 zu erstellen, das verschiedene Ringe für positive und negative Werte enthalten wird. Die Werte können größer als 100% oder kleiner als -100% sein, so dass ein Bogen den verbleibenden Wert darstellt. Unten ist das Beispielbild des Diagramms: 
Der erste positive Kategoriewert (Category_1 - Gray) ist 80, also füllt 80% den Kreis mit Grau und die 20% für die nächste positive Kategorie. Der nächste positive Kategoriewert (Category_2 - Orange) ist 160. Also verwendet er zuerst die 20%, die von Category_1 übriggeblieben sind (Wert 140, der noch übrig ist). Dann füllt es den nächsten Kreis (aufwärts) mit 100% (40 Wert ist jetzt übrig) und für den verbleibenden Wert (40) erstellt es einen Teilkreis nach oben.
Nun haben wir Kategorie_3 (dunkelrot) als negativ (-120%), also wenn wir einen inneren Kreis erstellen und ihn zu 100% füllen (20 Wert, der jetzt übrig ist), und dann einen inneren Bogen zum Verbleib erzeugt Wert (20). Wir haben eine andere negative Kategorie (Category_4 - red), also beginnt sie dort, wo die vorherige negative Kategorie (Category_3) endete und füllt 20% von dort.
Bearbeiten 3: Ich habe ein sehr einfaches arc-basiertes Donut-Diagramm erstellt und wenn der Gesamtwert 100 übersteigt, kann ich für die verbleibenden Werte äußere Ringe erstellen. Unten ist der JSFiddle-Link:
%Vor%Bitte teilen Sie einige Ideen für die Implementierung.
1 Antwort
Ok, das hat etwas gedauert, aber es scheint zu funktionieren. Lassen Sie uns zuerst feststellen, dass das, was Sie als Donut-Diagramm beschreiben, auch als eine Reihe von Balken gerendert werden kann - mit genau denselben Daten. Also habe ich von dort angefangen und es schließlich in ein Donut-Diagramm umgewandelt, aber ich habe die Bar-Implementierung auch dort gelassen. Die andere Sache ist, dass eine generische Lösung in der Lage sein sollte, die Segmente mit jedem Wert zu umbrechen, nicht nur mit 100, also habe ich einen Schieberegler eingefügt, mit dem Sie diesen Umbruchwert variieren können. Schließlich - und das ist einfacher in einer Balken- als Donut-Implementierung zu erklären -, anstatt die Striche immer von links nach rechts wie Text umbrechen zu lassen, kann es wünschenswert sein, im Zickzack, dh abwechselnd von links nach rechts und dann rechts zu wickeln. nach links und so weiter. Dies hat zur Folge, dass beim Aufteilen eines Betrags in zwei Segmente auf zwei separaten Zeilen der Zickzack-Ansatz diese beiden Segmente nebeneinander hält. Ich habe ein Kontrollkästchen hinzugefügt, um dieses Zickzack-Verhalten ein- / auszuschalten.
Hier ist ein funktionierendes jsFiddle und eine weitere Iteration davon.
Hier sind die wichtigen Bits:
Es gibt eine Funktion wrap(data, wrapLength) , die ein Array von data -Werten und ein wrapLength enthält, um diese Werte zu umbrechen. Diese Funktion ermittelt, welche Datenwerte in Teilsegmente aufgeteilt werden müssen, und gibt ein neues Array von ihnen zurück, wobei das Objekt jedes Segments die Werte x1 , x2 und y aufweist. x1 und x2 sind der Anfang und das Ende jedes Balkens und y ist die Zeile des Balkens. In einem Donut-Diagramm sind diese Werte äquivalent Startwinkel ( x1 ), Endwinkel ( x2 ) und Radius ( y ) jedes Bogens.
Die Funktion wrap() weiß nicht, wie negative oder positive Werte berücksichtigt werden, also muss wrap() zweimal aufgerufen werden - einmal mit allen Negativen und dann mit allen positiven Werten. Von dort wird eine Verarbeitung selektiv nur auf die Negative angewendet, und dann wird mehr Verarbeitung auf die Kombination der zwei Sätze angewendet. Der gesamte Satz von Transformationen, der in den letzten 2 Absätzen beschrieben wurde, wird durch folgendes Snippet erfasst. Ich schließe hier nicht die Implementierung von wrap() ein, sondern nur den Code, der sie aufruft. auch ohne den Rendercode, der ziemlich einfach ist, wenn segments generiert wird.
Tags und Links javascript html d3.js