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 funktioniert mit den 2 vorherigen Werten der aktuelle 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 Daten-Parsing-Code hier: D3.js Jobs in London D3.js Jobs Demand Trend in London Die Nachfrage Trend der Job-Anzeigen in der gesamten London Region zitiert D3.js als Anteil aller IT-Arbeitsplätze mit einem Spiel in den Bibliotheken, Frameworks amp Software Standards Kategorie. D3.js Gehaltstendenzen in London Diese Grafik zeigt den dreimonatigen gleitenden Durchschnitt für Gehälter, die in dauernden IT-Jobs zitiert werden und auf D3.js in der Region London verweisen. D3.js Gehalt Histogramm in London Diese Tabelle bietet ein Gehalt Histogramm für IT-Arbeitsplätze zitiert D3.js über die Region London im Laufe der 3 Monate bis 13. Januar 2017. D3.js Job Locations in London Die Tabelle unten sieht auf die Nachfrage und bietet eine Führer zu den mittleren Gehältern zitiert in IT-Arbeitsplätze zitiert D3.js innerhalb der Londoner Region über die 3 Monate bis 13. Januar 2017. Die Spalte Rank Change gibt einen Hinweis auf die Veränderung der Nachfrage in jedem Ort auf der Grundlage der gleichen 3 Monate Zeitraum im vergangenen Jahr . Rank Veränderung auf die gleiche Zeit Letztes Jahr Matching Permanent IT Job-Anzeigen Median Gehalt Letzte 3 Monate Erstellen einer Yahoo Finance Chart mit D3 und d3fc Die meisten Charting-Bibliotheken sind Monolithen. Je mehr Features sie unterstützen, desto unhandlicher ihre APIs zu werden. Mit dem d3fc-Projekt erforschen wir einen alternativen Ansatz, der Diagramme aus einer Reihe kleiner Komponenten mit Hilfe der D3-Bibliothek erstellt. In diesem Beitrag möchte ich die Macht der beiden d3fc und D3 durch die Re-Erstellung der ziemlich komplexen Yahoo Finanzen Diagramm zu demonstrieren. Das Erstellen einer pixelgenauen Erholung dieses Diagramms mit einer monolithischen Chartbibliothek wäre eine große Herausforderung (wenn nicht sogar unmöglich). Mit d3fc ist es überraschend einfach Dieser Beitrag nimmt einen Schritt-für-Schritt-Ansatz zu zeigen, wie die Yahoo-Finance-Chart kann getreu wiederhergestellt werden. Rendering ein einfaches Diagramm d3fc und seine Abhängigkeit sind über npm wie in den Installationsanweisungen. D3fc erstellt Diagramme mit SVG, so dass der erste Schritt ist, um ein SVG-Element auf der Seite hinzuzufügen: Die Yahoo Finance-Daten stehen als CSV-Daten über eine nicht unterstützte, aber weit verbreitet API. D3 hat eine Reihe von Utility-Funktionen zum Abrufen und Analysieren von Daten, einschließlich CSV. Der folgende Code führt eine XHR-Anfrage über d3.csv aus: Sobald die Daten abgerufen und analysiert wurden, wird die folgende renderChart-Funktion aufgerufen: Wenn man diesen Code im Detail betrachtet, konstruiert der erste Schritt eine fc. chart. linearTimeSeries. Dies ist eine relativ hohe d3fc-Komponente, die ein Diagramm mit einer horizontalen Datumsachse und einer vertikalen numerischen Achse wiedergibt. Seine Hauptaufgabe ist, ein SVG-Layout zu konstruieren, das die verschiedenen Teile des Diagramms (Achsen, Plot-Bereich, etc.) beherbergt. Die Funktion fc. util. extent wird verwendet, um die Extents (max und min Werte) verschiedener Eigenschaften der Daten zu berechnen. Als nächstes wird eine d3fc-Bereichsreihe erstellt, wobei die yValue-Zugriffseigenschaft dazu verwendet wird, den offenen Wert von jedem Datenpunkt auszuwählen. Der Standard-xValue-Accessor für die meisten Komponenten erwartet eine Datumseigenschaft, was in diesem Beispiel der Fall ist. Die Diagramme plotArea werden auf die Bereichsreihe eingestellt, so dass die Bereichsreihe auf die richtige Skala angewendet wird. Schließlich wird das SVG-Element mit d3.select ausgewählt. Werden die Daten gebunden, und die Diagrammkomponente ruft die Auswahl auf. Wenn Sie bereits einige Erfahrung mit D3 hatten, sollte dieses Konstruktionsmuster Ihnen ziemlich vertraut sein. Die d3fc-Komponenten folgen dem D3-Komponentenmuster. Hinzufügen von Gitternetzlinien und Zeilen In anderen Diagrammbibliotheken kann es sich um Zeilen, Punkte und Bereiche als einzelnen Serientypen handeln, wobei d3fc einen Mikrokomponentenansatz bevorzugt, bei dem jede einzelne Zeile getrennt ist. Für diese Tabelle sind eine Bereichs - und Zeilenserie erforderlich: Gitternetzlinien sind eine weitere d3fc-Komponente: Der Kartenplotbereich akzeptiert nur eine einzelne Serie, jedoch können mehrere Serieninstanzen (die x - und y-Skalen haben) unter Verwendung einer Mehrfachserie gruppiert werden Multi-Serie erzeugt ein g enthaltendes Element für jede der gelieferten Reihen, setzt ihre x - und y-Skalen und propagiert die Daten zu jedem. Mit Gitternetzlinien, Bereichs - und Zeilenserien hinzugefügt, und einige kleine Tweaks auf die Anzahl der Zecken, sieht das Diagramm wie die folgenden aus: d3fc Komponenten sind über CSS gestylt. Der einfachste Weg, um die geeigneten CSS-Selektoren für das Styling einer Komponente zu bestimmen, ist nur die gerenderte Ausgabe zu betrachten. Das Yahoo-Diagramm hat einen subtilen Farbverlauf, der auf die Bereichsreihe angewendet wird. SVG-Gradienten sind (eher ungeschickt) in SVG wie folgt definiert: Beachten Sie, dass das Aufrufen der linearTimeSeries-Komponente auf dem obigen SVG das defs-Element nicht zerstört. D3fc-Komponenten werden so geschrieben, dass sie ihre eigenen Elemente über die CSS-Klasse identifizieren, so dass diese Elemente neben anderen in demselben Container leben können. Mit einigen einfachen CSS die Gradienten-und Linien-Stile können auf das Diagramm angewendet werden. Leider ist es nicht möglich, D3-Achsenetiketten über CSS neu zu positionieren. Der einzige Weg, dies zu erreichen, besteht darin, dass die Achse dann eine D3-Auswahl verwendet, um die Etiketten zu lokalisieren und sie dann direkt zu verschieben: Dies ist nicht ideal, da der obige Code jedes Mal durchgeführt wird, wenn die Diagramme gerendert werden, unabhängig davon, ob die Achsen Updates benötigen . Mit diesem Styling sieht das Diagramm wie folgt aus: Das Hinzufügen eines gleitenden Durchschnitts d3fc hat eine Reihe von finanziellen Indikatoren, diese Algorithmen werden direkt auf die Diagrammdaten angewendet, wobei die Standardimplementierung neue Eigenschaften zu den Daten hinzufügt Bereitstellung einer benutzerdefinierten Merge-Funktion). Im Folgenden wird ein exponentieller gleitender Durchschnitt (EMA) basierend auf dem geschlossenen Preis berechnet: Um einen Indikator zu rendern, ist ein geeigneter Renderer erforderlich. Eine EMA berechnet für jeden Datenpunkt einen einzelnen Wert und wird über eine reguläre Zeilenserie gerendert, aber für komplexere Indikatoren (MACD, Bollinger) liefert d3fc dedizierte Renderer. Der Code oben zeigt das Dekor-Muster, das auf den meisten d3fc Komponenten gefunden werden kann. Decorate wird eine Auswahl übergeben, die als Ergebnis der Komponenten-Datenverknüpfung erstellt wird. Wenn Sie nicht vertraut sind mit diesem Konzept, Id empfehlen Mikes Thinking With Joins Artikel. In dem obigen Code ist die zur Dekoration gelieferte Auswahl die Aktualisierungsauswahl für das Komponenten-Root-g-Element. Die Eingabe-Auswahl wird verwendet, um eine Ema-Klasse zu diesem Element hinzuzufügen. Beachten Sie, dass mit der Enter-Selektion dies nur einmal durchgeführt wird, an der Stelle, an der das Element zuerst gebaut wird. HINWEIS: Diese Eingabeauswahl ist nicht die gleiche wie diejenige, die über eine Standarddatenverbindung erhalten wird. In diesem Fall hat die Eingabeauswahl bereits ein Element angehängt. Youll sehen dekorieren an einigen Stellen in diesem Beispiel verwendet werden, ist es ein leistungsfähiges und vielseitiges Muster. Wenn die EMA-Serie den Multi-Serien hinzugefügt wird, sieht das Diagramm wie folgt aus: Hinzufügen eines Volumendiagramms Das Yahoo Finance Chart zeigt das gehandelte Volumen in der unteren Hälfte des Plot-Bereichs, dies ist ein ziemlich normales Chart-Layout. Um das Volumendiagramm wiederzugeben, ist eine sekundäre y-Skala erforderlich, wobei die Domäne auf dem Datenvolumen basiert und der Bereich auf die Hälfte der Höhe des Diagrammbereichs eingestellt ist. Der lineareTimeSeries hat nicht eine Volumenskala als Teil seines Layouts, das ist etwas, das manuell hinzugefügt werden muss. Die lineareTimeSeries verwendet die Layout-Komponente d3fc, die das Flexbox-Layout implementiert hat, so dass es sinnvoll ist, auch hierfür einen Container für die Volume-Serie zu erstellen. Im Folgenden wird ein g-Element erstellt, das als Container für die Volume-Reihe dient: Anstatt ein g-Element direkt in den Container anzuhängen, wird es innerhalb einer Datenverknüpfungsselektion angefügt. Dadurch wird sichergestellt, dass nur ein Element hinzugefügt wird, unabhängig davon, wie oft die renderChart-Funktion aufgerufen wird. Das obige Beispiel ist ein relativ einfaches Layout, für ein komplexeres Beispiel Pop über die d3fc Website. Eine Volumenskala wird mit einer Domäne basierend auf den Eingabedaten und einem Bereich auf der Basis der Höhe des Volumencontainers aufgebaut: Schließlich wird eine Volumenserie konstruiert und gerendert: Daraus ergibt sich folgendes Diagramm: Färben der Volumenbalken Der letzte Schritt in Dieses Beispiel ist es, jeden Balken des Volumendiagramms auf der Grundlage davon zu färben, ob der Preis innerhalb der durch den gegebenen Balken dargestellten Periode gestiegen oder gefallen ist. Auch hier wird wieder dekoriert: Wenn man sich die SVG-Elemente ansieht, die für eine Balkenreihe konstruiert sind, so finden Sie, dass jeder Balken aus einem g-Element mit einem einzigen Pfad aufgebaut ist. Die obige Dekorfunktion verwendet die Eingabe-Auswahl, die diese g-Elemente enthält, wählt den verschachtelten Pfad aus und wendet eine geeignete Strichfarbe auf der Grundlage der Richtung der Preisbewegung an. Das Diagramm fängt jetzt an, ganz zu schauen, wie das Yahoo Finanzdiagramm: Schlussfolgerungen In diesem Blogpfosten haben Sie gesehen, wie d3fc Bestandteile zusammengebaut, gestaltet und verziert werden können, um ein verhältnismäßig kompliziertes finanzielles Diagramm wieder herzustellen, obgleich es nicht gerade noch vollständig ist. In meinem nächsten Beitrag Ill zeigen, wie d3fc Legende und Fadenkreuz Komponenten hinzugefügt werden können, um einige Interaktivität bieten, und wie man eine benutzerdefinierte Diskontinuität Anbieter erstellen Bis dann, wenn Sie irgendwelche Fragen über d3fc oder dieses Beispiel haben, kontaktieren Sie uns entweder über das Kommentarfeld Unten oder über das GitHub-Projekt. Grüße, Colin E. Ich bin Technologie-Direktor bei Scott Logic und bin ein produktiver technischer Autor, Blogger und Referent auf einer Reihe von Technologien. Für eine Reihe von Jahren arbeitete ich mit dem Microsoft Stapel von Technologien, einschließlich WPF, WCF, Silverlight und Windows Phone. Vor kurzem habe ich diversifiziert, um HTML5, JavaScript und iOS-Entwicklung enthalten.
No comments:
Post a Comment