Ich habe die folgenden csv-Daten,
%Vor%Gibt es eine Möglichkeit, die Daten für jan-2014 für die f & amp; r- und ip sbu-Werte zu kombinieren und die Werte im gestapelten Balken anzuzeigen. Zum Beispiel, wenn ich ein Kontrollkästchen zum Gruppieren ankreuze, muss ich gescannt als 30 + 10 = 40 und als 100 + 90 = 190 in einem Stapel für Jan 2014 in X-Achse gescannt.
Mein Code zum Erstellen der Stapelleiste lautet wie folgt:
%Vor%Sie scheinen verwirrt darüber zu sein, wie die SVG aussehen sollte, und wissen daher nicht, wie Sie das erreichen können.
Die Balken in SVG sind nur Rechtecke. Sie müssen ihnen sagen, wo sie positioniert werden sollen (was immer durch die obere linke Ecke der Leiste definiert ist) und wie groß sie sein sollten.
Um die Balken in einer gestapelten Grafik auszurichten, müssen Sie ihre Position und Größe basierend auf allen Werten für diesen Stapel herausfinden.
Ich habe ein sehr vereinfachtes Beispiel für ein gestapeltes Balkendiagramm mit Ihren Daten erstellt (nur die gescannten / nicht gescannten Daten, ich habe die Dinge nicht durch die sbu-Variable getrennt).
>Hier ist das funktionierende Beispiel
Hier ist der Code mit Kommentaren:
%Vor%Sobald Sie sicher sind, dass Sie wissen, was bei jedem Schritt dieses Programms passiert, können Sie zusätzliche Funktionen wie Achsen oder Tooltips hinzufügen. Sie werden auch in einer guten Position sein, um den Code so anzupassen, dass er mit vielen Kategorien arbeitet, obwohl Sie in diesem Fall wahrscheinlich ein Unterarray zur Darstellung der Daten für jede Kategorie erstellen und eine geschachtelte Auswahl zum Erstellen der Rechtecke verwenden möchten. Dies ist der Ansatz der meisten gestapelten Balkendiagramm-Beispiele. Sie werden hoffentlich leichter zu verstehen sein, wenn Sie mit dieser sehr vereinfachten Version arbeiten.
Bearbeiten
Die obige Lösung funktioniert, wenn Sie wissen , dass Sie nur zwei Werte in jedem Stapel haben, wobei die Daten für beide Werte aus derselben Zeile der Datentabelle stammen. Wenn Sie in jedem Stapel viele -Balken haben und / oder wenn sie aus mehreren Zeilen der Datentabelle stammen, sollten Sie ein geschachtelte Auswahl , um die Daten an einzelne Balken anzupassen.
Um den geschachtelten Auswahlansatz zu verwenden, müssen Sie zuerst Ihre Daten manipulieren. Sie müssen es in verschachtelte Array-Format bekommen. Das äußere Array muss jeden Stack repräsentieren, und jedes Stack-Datenobjekt muss ein Sub-Array enthalten, das jeden Balken darstellt.
Wie Sie das verschachtelte Array erstellen, hängt von Ihrem ursprünglichen Datenformat ab. Wenn sich die Werte, die Sie stapeln möchten, in verschiedenen Zeilen befinden, kann der d3.nest -Operator gruppieren sie zusammen in Sub-Arrays. Wenn die gestapelten Werte unterschiedliche Zahlen aus derselben Zeile der Datentabelle haben, müssen Sie ein forEach() Funktion, um alle Zeilen Ihrer Daten zu durchlaufen und daraus jeweils ein Array zu konstruieren.
In Ihrem Beispiel möchten Sie beides, also kombinieren wir eine Verschachtelungsoperation mit einer forEach-Operation. Gleichzeitig werden wir die laufenden Summen für den Stapel berechnen: Um jeden Balken richtig zu positionieren, müssen wir nicht nur seine eigene Anzahl, sondern auch die Gesamtanzahl aller darunter liegenden Werte im Stapel kennen.
Hier ist eine funktionierende Geige
Der Datenmanipulationscode ist
%Vor% Wenn Sie nicht bestimmte Arten von Balken zusammenfassen möchten - zum Beispiel, wenn Sie die Werte von verschiedenen compid s in verschiedenen Stapeln behalten möchten - dann würden Sie diese einschließen Dieser Parameter als zweiter Schlüssel für die Verschachtelungsfunktion. Werte werden nur zusammen verschachtelt, wenn sie auf alle den Verschachtelungsschlüsseln übereinstimmen. Natürlich müssten Sie dann Ihre X-Skala ändern, um die Stapel mit beiden Schlüsseln zu trennen. Schlagen Sie Beispiele für gruppierte Balkendiagramme nach, wie Sie das tun.
Sobald Sie die ordnungsgemäß verschachtelten Daten haben, verbinden Sie das äußere Array (das Array von Verschachtelungsobjekten) mit <g> -Elementen, die jeden Stapel darstellen, und erstellen dann eine verschachtelte Auswahl von Rechtecken innerhalb jeder Gruppe und schließe dich dem inneren Array (den Balkendaten) an:
Tags und Links d3.js