Ich mache ein Multi-Liniendiagramm mit der Dimensional Charting Javascript-Bibliothek dc.js, die auf d3 und Crossfilter basiert. Ich bin neu in dc.js library.i Ich versuche, das mehrzeilige Diagramm mit CSV-Datei anzuzeigen. Ich kann nicht verstehen, wie man mehrzeiliges Diagramm nach dem csv-Format erstellen.
Mein CSV-Spaltenformat ist
%Vor%Ich versuche Code zu täuschen:
%Vor%Es kann hilfreich sein, die Dimension als die Werte zu betrachten, die entlang der X-Achse und den Gruppen angezeigt werden sollen, so wie die Daten für eine beliebige Koordinate auf der X-Achse zu einem einzigen Y-Wert gruppiert werden sollen . Auf diese Weise stellt eine Gruppe die Daten für eine Zeile in Ihrem mehrzeiligen Diagramm dar. Sobald Sie das geschafft haben, müssen Sie N + 1 Diagramme in dc.js erstellen. Das heißt, ein lineChart für jedes Diagramm, das Sie sehen möchten, und dann ein compositeChart, um sie alle zusammen zu sammeln. Die einzelnen lineCharts können ziemlich einfach sein, weil sie viele Eigenschaften von dem CompositeChart erben, in dem sie enthalten sind.
Erst nachdem ich den unten stehenden Code fertiggestellt hatte, bemerkte ich die tatsächlichen Werte, die Sie für die X-Achse eingestellt hatten, und ich erkannte, dass ich vielleicht falsch interpretiert hatte, was Sie wirklich tun wollten. Das tut mir leid. Hoffentlich wird es immer noch die grundlegenden Ideen für Sie veranschaulichen.
%Vor%Beachten Sie, wie ich eine "Run" -Eigenschaft in Ihre Daten eingefügt habe, um einen einheitlichen Wert für die Dimension zu erstellen. Ich habe Ganzzahlen gewählt, weil sie einfach sind, aber die Werte könnten genauso gut Daten oder Namen von Experimenten sein oder was auch immer es ist, das eine Zeile in Ihren Daten erzeugt. Die Werte in Ihrem Datensatz werden direkt im Diagramm angezeigt, da meine Dimensionsauswahl über alle eindeutigen Werte verfügt. Hätte es wiederholte Werte gegeben (z. B. eine 10. Zeile mit Measurement = 9 und einem Wert von 10 für jeden Altersbereich), dann wären alle Daten für eine gegebene Dimensionswerte durch die .reduceSum () -Methode summiert worden (also ein Wert von 34,8 für 9 auf der X-Achse).
Tags und Links javascript d3.js dc.js