Wie kann ich ein gestapeltes Balkendiagramm iterativ zeichnen?

Question

So habe ich Zeitreihendaten in einem Array, das wie folgt aussieht:

var data = [ 

[{date: 2016-01-01 00:00:00, value: 52}, 
{date: 2016-01-02 00:00:00, value: 23}, 
{date: 2016-01-03 00:00:00, value: 42}, 
{date: 2016-01-04 00:00:00, value: 12, 
... 
], 
[{date: 2016-01-01 00:00:00, value: 12}, 
{date: 2016-01-02 00:00:00, value: 42}, 
{date: 2016-01-03 00:00:00, value: 35}, 
{date: 2016-01-04 00:00:00, value: 11}, 
... 
], 
... 
] 

wo Daten [i] die Zeitreihe darstellen (die Daten um 00:00:00 täglich gesammelt wird) für eine Komponente, die eine ist Teil des gesamten Datenarrays.

Was ich tun möchte, ist ein gestapeltes Balkendiagramm für jedes {Datum, Wert} -Objekt zu erstellen, so dass Sie einen Teil sehen, der data[0] darstellt, ein Teil, der data[1], ..., data[data.length-1] darstellt.

Was ist der beste Weg, dies in d3 zu tun? Vielen Dank! Hier

Answer 1

ist der Entwurf für einen Ansatz, den Sie sich anschauen sollten, die nur JavaScript und SVG erfordert:

1. subtrahieren von jedem Ihrer Datumswerte eine Konstante früheren Valuta zum Beispiel Unix-Systeme verwenden 1. Januar 1970 um einen Zeitdifferenzwert in Tagen zu berechnen, so dass Ihre Zeitwerte zu einer Reihe von ganzen Zahlen werden.

2. in Ihrem HTML, geben Sie einen div wie:

   <div id="data_display"></div> 
   

3. In Ihrem Skript (hier nicht vollständig, aber nur die Grundidee zu bekommen):

   var dd = document.getElementByID("data_display"); 
   dd.innerHTML = "<svg width='" + data.length + "' height='100'>" 
   for (i = 0; i < data.length; i++) { 
       dd.innerHTML += "<rect x='" + data[i] + "' y='... 
   } 
   dd.innerHTML += "</svg>" 
   

   Sie hier nur Fülle die x, y, Breite und Höhe jedes Svg-Rechtecks ​​mit geeigneten Parametern aus deiner Datenstruktur aus. Sie können auch Füll-, Strichfarben usw. für die Rechtecke festlegen sowie andere Svg-Objekte wie Text und Linien usw. hinzufügen, um Ihr Diagramm zu vervollständigen.