Im neu auf D3 und versuchen, einen gleitenden Durchschnitt der vorherigen und nächsten Werte auf meine Daten zu tun, um es zu glätten. Derzeit habe ich es mit den 2 vorherigen Werten den aktuellen Wert. Es funktioniert aber 1) wie würde ich auch die nächsten Werte, und 2) was, wenn ich wollte die 15 vorherigen und 15 nächsten Werte verwenden (es wäre verrückt, 30 individuelle Vars für die Speicherung aller von ihnen haben) Im verwendet werden Traditionellen Javascript aber verloren, wie man die Daten auf diese Weise in D3. Hoffe jemand kann mich aufklären, danke. Oder nur die Datenanalyse Code hier: Eine Bollinger Bands Komponente für D3-Charts In meinem letzten Artikel (on-line-Annotation Komponenten für D3-Diagramme), schuf ich eine Komponente, die berechnet und zeigt einen gleitenden Durchschnitt. Wie versprochen, lege ich jetzt meine Aufmerksamkeit auf Bollinger Bands. Die Komponente Im gehen zu schaffen wird wie folgt aussehen: Wie im Vorfeld, Im gehen zu betrügen, indem sie das Diagramm Toms in seinem Artikel auf OHLC und Candlestick Komponenten entwickelt. Und Im die Schaffung der Komponente nach Mike Bostocks Convention. Was sind Bollinger Bands Froh, dass Sie gefragt. In Kürze werden Bollinger Bands auf Finanzplänen verwendet, um die Preisvolatilität anzugeben. Wie Sie aus dem obigen Diagramm ersehen können, bestehen sie aus drei Komponenten: Die oberen und unteren Bänder sind einige Standardabweichungen vom gleitenden Durchschnitt entfernt - und es ist zu beachten, dass es hier um eine bewegte Standardabweichung ging. Aus dieser Definition können wir sehen, dass wir zwei Parameter für unsere Berechnungen benötigen - die gleitende durchschnittliche Periode. Für die üblicherweise ein Wert von 20 verwendet wird, und die Anzahl der Standardabweichungen. Die typischerweise 2. Bollinger Bands Component Heres der komplette Code für die Bollinger Bands Komponente - Ill gehen durch es unten und erklären, was los ist. Das ist eine anständige Menge an Code, so können Sie an der Spitze, indem Sie die Eigenschaften Ive auf dieser Komponente definiert - youll sehen, dass Ive gebrochen sie in Abschnitte, so dass wir nicht einen monolithischen Block der Deklarationen am Anfang der Datei. Zuerst haben wir die X-und Y-Skalen, die die Komponente braucht, wenn seine Arbeit aus, wo die Dinge zu zeichnen. Als nächstes haben wir die Felder, die wir benötigen, um unsere Berechnungen durchzuführen - das Feld, das auf dem Datenmodell, dem gleitenden Durchschnittszeitraum und der Anzahl der Standardabweichungen verwendet werden soll. Beachten Sie, dass standardmäßig die gleitende durchschnittliche Periode bis 20 und die Anzahl der Standardabweichungen auf 2, die typischen Werte für diese Felder. Schließlich haben wir eine Reihe von Eigenschaften, die CSS-Klassen für die verschiedenen Teile der Komponente definieren. Dies bietet dem Benutzer eine Menge an Anpassbarkeit, wenn es um Styling kommt, aber wir setzen Standardwerte, so dass der Benutzer nicht diese Eigenschaften angeben müssen. In der Komponentenfunktion erzeugen wir eine d3.svg. area, um den Bereich zwischen den oberen und unteren Bändern und drei d3.svg. line-Objekten darzustellen, die das obere Band, das untere Band und die gleitende mittlere Linie darstellen und ihre X-Werte setzen passend. Im mit dem Bereich Element, weil das ist eine wirklich schöne, integrierte Möglichkeit, den Bereich zwischen zwei Zeilen zu zeigen. Der beste Teil ist, seine wirklich einfach zu bedienen - wo ein Zeilenelement Sie Ihren Y-Wert setzen muss, ein Flächenelement hat zwei Y-Werte - und Im sehr viel dafür, das Leben einfach für mich. Im nächsten Abschnitt definieren wir zwei Funktionen, um den gleitenden Durchschnitt und die sich bewegende Standardabweichung zu berechnen. Beachten Sie, dass Bollinger-Bänder die Populationsversion der Standardabweichungsformel verwenden. Innerhalb der Auswahl. Jeder Block ist, wo wir unsere schweren Heben - Einstellung der Y-Werte unserer verschiedenen SVG-Elemente. Wir deklarieren eine leere Variable, bollingerData. Dann füllen wir es mit Daten - es ist eine Karte von Datum zu avg (gleitender Durchschnitt) und sd (Standardabweichung) für jedes Datenelement. Wir tun dies einmal, das ist massiv effizienter als es wäre, wenn wir alle diese Berechnungen auf der Flucht getan haben Auf der anderen Seite waren diese Mittel zu tun, diese Berechnungen jedes Mal, wenn die Komponente neu gezeichnet wird, wenn wir maximal effizient wed Cache dies wollte Informationen, aber das würde auch verlangen, dass wir überprüfen, dass die Daten nicht jedes Mal geändert, wenn wir brauchen, um neu zu zeichnen, die seine eigenen Probleme bringt. Der Rest der selection. each Block ist langwierig aber ziemlich einfach - waren nur die Einstellung der Y-Werte für unsere Bereich und Linie-Elemente auf der Grundlage der Daten in der bollingerData Karte. Schließlich fügen wir die areaBands hinzu. Zeile. LineLower und lineAverage SVG-Elemente auf den Pfad. Beachten Sie, dass wir nicht die gesamte Daten-Array auf diesen Elementen - Bollinger Bands in der Regel arent angezeigt, wenn theres nicht genug Daten, um die volle gleitende Durchschnitt zu berechnen, so dass wir bei Index movingAverage starten. Was die gewünschte Wirkung hat. Ive nicht gezeigt, die verschiedenen Rauset-Accessoren, weil theyre nicht besonders interessant, da theyre ziemlich viel alle gleich: Hinzufügen der Komponente auf die Tabelle OK, das ist die heikle bisschen aus dem Weg, so jetzt können diese neue Bollinger Bands Komponente verwenden. Zuerst erstellen und konfigurieren wir unsere Komponente: Hier wurde nur gesagt, die Komponente über die X-und Y-Skalen, und sagen, dass die enge Eigenschaft auf dem Datenmodell zu verwenden. Die MovingAverage - und StandardDeviations-Eigenschaften sind optional (vor allem da wurden nur die Einstellung auf ihre Standardwerte hier, aber youd müssen sie, wenn Sie etwas Nicht-Standard wollte). Wir konnten auch eine der vier CSS-Eigenschaften setzen, die die Komponente enthüllt, aber ich habe gewählt, um sie hier wegzulassen und sie einfach mit ihren Standardwerten zu belassen. Mit dem getan, fügen wir die Komponente zum Diagramm hinzu: ProTip: Im, das diesen Code gerade vor den Code setzt, um die Diagrammdaten selbst anzuzeigen, damit die Bollinger Bänder im Hintergrund sind und die Diagrammdaten im Vordergrund. Offensichtlich ist der letzte Schritt, um die verschiedenen Abschnitte der Komponente Stil. Ive gewählt, um die Bollinger Bands in Grau anzuzeigen, also Im mit einem hellgrau für den Bereich zwischen den oberen und unteren Bands und ein dunkleres Grau für die Bands selbst (Sie könnten stattdessen Transparenz, um den Bereich leichter). Als beiseite, beachten Sie, dass Ive Strich-Breite: 0 auf dem Gebiet gesetzt, so dass es keine Grenzen zeigt. Ich habe dies aus zwei Gründen getan. Erstens, zeichnen über die obere und untere Grenzen sowieso, und zweitens wollen wir nicht eine linke oder rechte Grenze gezeigt werden - versuchen Sie entfernen diese Zeile und youll sehen, was ich meine. Alles zusammen, das ist das Ergebnis: Verbesserungen Im ziemlich glücklich mit dieser Komponente - es funktioniert wirklich gut und seine relativ effizient, programmgesteuert. Es gibt noch einige Verbesserungen, die wir tun konnten. Wenn Sie durch den Wikipedia-Eintrag auf Bollinger Bands lesen Sie sehen, dass mit einer einfachen gleitenden Durchschnittsberechnung, aber dass andere Arten der Berechnung manchmal verwendet wurden, könnten wir unsere Komponente erweitern, damit der Benutzer durch die Bereitstellung einer zusätzlichen Eigenschaft wie. movingAverageType Exponentiell). Fazit In diesem Artikel habe ich die gleitende durchschnittliche Komponente, die ich in meinem vorherigen Artikel entwickelt und verwendet es als Grundlage für eine Bollinger Bands Komponente. Die neue Komponente ist sehr einfach zu konfigurieren und zu gestalten.
No comments:
Post a Comment