D3 Js Gleitender Durchschnitt

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: Der folgende Beitrag ist ein Teil der D3 Tipps und Tricks Dokument, das es kostenlos zum Download. Um diesen Beitrag im Kontext zu verwenden, betrachte es mit den anderen im Blog oder lade einfach das pdf und / oder die Beispiele von der Downloadseite herunter :-) Tooltips haben eine wunderbare Dualität. Sie sind auf der einen Seite eine hübsche verflixte nützliche Sache, die Hilfen bei der Bereitstellung von Kontext und Informationen, wo erforderlich und auf der anderen Seite, wenn mit ein bisschen Pflege gemacht, können sie sehr stilvoll aussehen :-). Technisch gesehen stellen sie eine leichte Verschiebung von dem dar, was wir bisher mit einer etwas komplexeren Arena von Übergängen und Ereignissen gespielt haben. Sie können diese von zwei Möglichkeiten. Entweder akzeptieren, dass es nur funktioniert und implementieren, wie gezeigt, oder Sie wissen, was los ist und fühlen sich frei, meine Bemühungen wie die eines Amateur-Rank :-). Die Quelle für die Umsetzung wurde von Mike Bostocks Beispiel hier entnommen bl. ocks. org/1087001. Dies wurde mit ein paar anderen Bits und Stücke (die kniffligste Ausarbeitung, wie die Formatierung des angezeigten Datum korrekt und Einfügen eines Zeilenumbruchs in der Tooltip (die ich hier gefunden habe groups. google/forum/fromgroupstopic/d3-js/GgFTf24ltjc Gut gemacht, um alle Beteiligten an dieser Diskussion)) Ich gehe davon aus, dass alle oder alle Fehler, die in der Implementierung auftreten, werden mir, während alle Erfolge werden bis zu den ursprünglichen Mitwirkenden. So, nur für den Fall gibt es einige Grad der Verwirrung, ein Tooltip (ein Wort oder zwei) ist eine diskrete Information, die Pop in die Ansicht, wenn die Maus über irgendwo spezifisch ist schweben. Die meisten von uns haben gesehen und verwendet, aber ich nehme, wir alle neigen dazu, sie zu nennen Verschiedene Dinge wie Infotip, Hinweis oder Hover-Box Ich weiß nicht, ob theres einen richtigen Namen für sie, aber heres ein Beispiel für das, was zu erreichen versuchen Sie können sehen, die Maus über einem der Streudiagramm Kreise schwebt und ein Tipp erschienen ist Der dem Benutzer das genaue Datum und den genauen Wert für diesen Punkt liefert. Nun können Sie auch bemerken, dass theres ein gewisses Maß an Phantasie hier, wie die Informationen durch eine rechteckige Form mit abgerundeten Ecken und eine leichte Trübung gebunden ist. Das andere Stück Phantasie, die Sie nicht sehen, in einem PDF ist, dass, wenn diese Tool-Tipps erscheinen und verschwinden, tun sie dies in einem eleganten Fade-in, verblassen-Weg. Purty. Nun, bevor wir anfangen zu beschreiben, wie der Code zusammengeht, können wir einen schnellen Blick auf die beiden Techniken, die ich bereits erwähnt, Übergänge und Ereignisse. Übergänge Von der Haupt-d3.js-Webseite (d3js. org) werden Übergänge beschrieben, um allmählich Stile und Attribute über die Zeit zu interpolieren. Also, was ich nehme, dass zu bedeuten, dass, wenn Sie ein Objekt ändern möchten, können Sie dies tun, indem Sie einfach das Attribut / Stil Endpunkt, dass Sie es am Ende mit und die Zeit, die Sie es nehmen und gehen wollen Natürlich , Ist es nicht ganz so einfach, aber zum Glück, intelligenter Menschen, als ich habe einige fantastische Arbeit, die verschiedene Aspekte von Übergängen getan, so sehen Sie bitte die folgenden für eine umfassendere Beschreibung des Themas Hoffentlich Beobachtung der Mouseover und Mouseout-Übergänge in der Tooltips Beispiel wird Whet Ihr Appetit für mehr Die andere Technik bezieht sich auf Mausereignisse. Dies beschreibt den Browser zu beobachten, wenn etwas passiert mit der Maus auf dem Bildschirm und wenn es tut, dauert es eine bestimmte Aktion. Eine (vermutlich nicht umfassende) Liste der Ereignistypen ist die folgende mousedown: Ausgelöst durch ein Element, wenn eine Maustaste gedrückt wird. Mouseup: Ausgelöst durch ein Element beim Loslassen einer Maustaste mouseover: Ausgelöst durch ein Element, wenn die Maus darüber kommt mouseout: Ausgelöst durch ein Element, wenn die Maus aus ihm herausgeht mousemove: Ausgelöst durch ein Element auf jeder Maus bewegen über es. Click: Ausgelöst durch einen Mausklick: mousedown und dann Mouseup über ein Element contextmenu: Ausgelöst durch einen Rechtsklick auf ein Element. Dblclick: Ausgelöst durch zwei Klicks innerhalb einer kurzen Zeit über ein Element Wie viele davon sind gültig, um innerhalb von d3 Im nicht sicher, aber Im bereit zu wetten, dass es wahrscheinlich mehr als die hier auch. Bitte gehen Sie zu javascript. info/tutorial/mouse-events für eine weit bessere Beschreibung des Themas, wenn erforderlich. Get tipping Also, gestärkt mit ein paar neue Konzepte zu prüfen, können sehen, wie sie in der Praxis umgesetzt werden. Wenn wir mit unserem einfachen Streudiagramm beginnen, gibt es 4 Bereiche darin, die wir ändern möchten (es kann einfacher sein, die tooltips. html Datei in den Beispiel-Dateien im Download-Bereich auf d3noob. org zu überprüfen). Der erste Bereich ist der CSS. Der folgende Code sollte unmittelbar vor dem lt / stylegt-Tag hinzugefügt werden. Diese Stile definieren, wie unsere Tooltip angezeigt wird. Die meisten von ihnen sind ziemlich direkt. Die Position der Tooltip erfolgt in absoluten Messungen, nicht relativ. Der Text ist zentriert, Höhe, Breite und Farbe des Rechtecks ​​sind 28px, 60px bzw. lightsteelblue. Die Polsterung ist eine interessante Eigenschaft, die eine ordentliche Weise, eine Form durch eine feste Menge von einer bestimmten Größe zu wachsen bietet. Wir setzen den Boarder auf 0px, so dass er nicht auftaucht und ein ordentlicher Stil (Attribut) namens border-radius bietet die schönen abgerundeten Ecken auf dem Rechteck. Schließlich, aber keinesfalls geringfügig, sind die Zeiger-Ereignisse: keine Zeile vorhanden, um das Mausereignis zu veranlassen, durch das Element zu gehen, und das Ziel, was unter diesem Element stattdessen ist (Lesen Sie mehr hier developer. mozilla. org/en-US/ Docs / CSS / pointer-Ereignisse). Das bedeutet, dass, auch wenn die Tooltip teilweise den Kreis verdeckt, der Code stll ist, als ob die Maus nur über dem Kreis ist. Der zweite Zusatz ist ein einfacher Einzeiler, der (für Formularen) unter die ParseData-Variablendeklaration gesetzt werden soll. Diese Zeile formatiert das Datum, in dem es in unserer Tooltip angezeigt wird. Ohne sie würde die Zeit auf eine störend lange Kombination zeitlicher Details verzichten. Im vorliegenden Fall haben wir erklärt, dass wir den Tag des Monats (e) und den vollen Monatsnamen (B) sehen wollen. Der dritte Codeblock ist die Funktionsdeklaration für div. Wir können das direkt nach der valueline-Definition im JavaScript platzieren. Wieder theres nicht zu viel hier ist das überraschend. Wir sagen es, um div an das body-Element anzufügen, setzen wir die Klasse auf die Tooltip-Klasse (von der CSS) und wir setzen die Opazität auf Null. Es mag merkwürdig klingen, wenn die Deckkraft auf Null gesetzt ist, aber denke daran, das ist der natürliche Zustand eines Tooltips. Es wird unsichtbar sein, bis sein Moment der Offenbarung ankommt und es auftaucht Der letzte Block des Codes ist etwas komplexer und könnte als eine mutierte Version des netten kleinen Bits des Codes beschrieben werden, den wir verwendet haben, um die Zeichnung der Punkte für das zu tun Streudiagramm. Das ist, weil die Tooltips alle über die Streudiagrammkreise sind. Ohne einen Kreis zur Mouseover erscheint die Tooltip nie :-). So ist der Code, der die Scatter-Zeichnung enthält (die enthalten, da seine ziemlich viel integral) Bevor wir beginnen, durch den Code, die Beispiel-Datei für Tooltips, die auf d3noob. org enthält eine kurze Reihe von Kommentaren für die Zeilen, die hinzugefügt werden Oder geändert aus dem Streudiagramm, also wenn Sie vergleichen wollen, was im Kontext vor sich geht, ist das eine Option. Die ersten sechs Zeilen des Codes sind eine Wiederholung des Streudiagramms. Die einzige Änderung ist, dass weve den Radius des Kreises von 3,5 auf 5 erhöht (nur um es einfacher zu machen, um Maus über das Objekt) und weve entfernt das Semikolon aus der cy-Attributlinie, da der Code jetzt weiterführen muss. So werden die Zusätze in Bereiche aufgeteilt, die den beiden Ereignissen entsprechen. Mouseover und Mouseout. Wenn sich die Maus über einen der Kreise im Streudiagramm bewegt, wird der Mausover-Code auf dem div-Element ausgeführt. Wenn die Maus aus dem Kreis bewegt wird, wird ein anderer Satz von Befehlen ausgeführt. Es wäre ein Fehler, an Tooltips im Plural zu denken, weil es arent eine ganze Reihe von einzelnen Tooltips nur darauf warten, um für ihre spezifischen Kreis erscheinen. Es gibt nur einen Tooltip, der angezeigt wird, wenn sich die Maus über einen Kreis bewegt. Und je nachdem, welchen Kreis er hat, ändern sich die Eigenschaften der Tooltip etwas (in Bezug auf Position und Inhalt). Auf. On (mouseover-Zeile initiiert die Einführung der Tooltip, dann erklären wir das Element, das wir einführen wollen (div) und dass wir einen Übergang zu seiner Einführung anwenden werden (Übergang ()) Die nächsten beiden Zeilen beschreiben den Übergang Dauert 200 Millisekunden (Dauer (200)) und führt zu einer Veränderung der Deckkraft von Elementen zu .9 (. Style (Opacity 9).) Da der natürliche Zustand unserer Tooltip eine Opazität von 0 ist, ist dies sinnvoll Die folgenden drei Zeilen formatieren unsere Tooltip. Die erste fügt ein html-Element, das unsere x und y-Informationen enthält, hinzu (Das Datum und die d. close-Wert) Nun ist dies in einer etwas seltsamen Weise getan. Weitere Tooltips, die ich gesehen habe, verwendet ein. Text-Element anstelle einer. Html ein, aber ich habe verwendet. Html in diesem Fall, weil Ich wollte das Zeilenumbruch-Tag 8220ltbr / gt8221 enthalten, um das Datum und den Wert zu trennen. Im sicher es gibt andere Möglichkeiten, es zu tun, aber das hat für mich gearbeitet. Der andere interessante Teil dieser Zeile ist, dass wir hier unsere Zeitformatierungsfunktion nennen, die wir früher beschrieben haben. Die nächsten beiden Zeilen positionieren die Tooltip auf dem Bildschirm und dazu greifen sie die X - und Y-Koordinaten der Maus, wenn das Event stattfindet (mit den d3.event. pageX - und d3.event. pageY-Snippets) und wenden Sie eine Korrektur an Der Fall der y-Koordinate, um die Tooltip um den gleichen Betrag wie ihre Höhe (28 Pixel) anzuheben. Auf. On (mouseout Abschnitt ist etwas einfacher, dass es nicht jede fancy Text / html / koordinieren Zeug zu tun. Alles es zu tun hat, ist zu verblassen, das div-Element. Und das geschieht durch einfaches Umkehren der Deckkraft wieder 0 und Einstellung Die Dauer für den Übergang zu 500 Millisekunden (etwas länger als die Fade-In macht es aussehen etwas kühler IMHO ).Recht, da gehst du. Als Beschreibung ist es am Ende ein bisschen eine Wand von Text Im Angst, aber hoffentlich Zwischen der Erläuterung und dem Beispiel-Code erhalten Sie die Idee. Bitte nehmen Sie sich die Zeit, um mit den hier beschriebenen Einstellungen zu finden, um diejenigen, die für Sie arbeiten zu finden und in dem Prozess werden Sie einige der Prinzipien, die D3 Ding seine Sache helfen zu stärken. Ive legte eine Kopie der Datei für das Zeichnen der Tooltips in den Download-Bereich auf d3noob. org mit den allgemeinen Beispielen als tooltips. html Bearbeiten: 2014-05-02: Nach einer interessanten Frage unten habe ich einen neuen Beitrag hinzugefügt, darunter ein HTML-Link in out Tooltips und es kann hier gefunden werden. Die obige Beschreibung (und Haufen anderer Sachen) ist in der D3 Tipps und Tricks Dokument, das von der Downloadseite von d3noob. org zugegriffen werden kann. Befolgen Sie Ihre Beispiele von Anfang bis Ende und fanden sie wirklich nützlich. Als kompletter Anfänger der D3 habe ich in den letzten zwei Tagen einen langen Weg zurückgelegt und mit meinen eigenen Daten angefangen. I39ve derzeit zwei Zeilen auf dem Graphen ordnungsgemäß angezeigt und bin jetzt auf der Suche nach einem Übergang, der für jede Zeile in auf eine Schaltfläche gebracht werden können. Alle Beispiele, wie dies funktionieren würde schätzen Sie Ihre Bemühungen in immer all dies on line Great stuff Justin. Hervorragend zu hören, dass die Informationen nützlich sind. I don39t haben ein Beispiel für den grundlegenden Code, dem Sie folgen konnten, aber wenn it39s jeder möglicher Trost, it39s auf meiner (langen und immer länger) Liste von Sachen, zum der Spitzen und des Tricks Handbuches hinzuzufügen. Mike Dewar hat ein wirklich gutes Beispiel in seinem Buch 39Getting begann mit D339, die mehrere Zeilen verwendet und Sie wechseln eine Legende, um sie ein-und ausschalten. Aber für mein Geld würde ich mit einem ausgezeichneten Beitrag von Jerome Cukier auf Übergängen hier anfangen blog. visual. ly/creating-animations-and-transitions-with-d3-js/ Eines seiner Beispiele sieht aus wie genau das, was Sie beschreiben und ich werde Werden einen langen harten Blick auf sie, wenn es Zeit, um diese zu dem Handbuch hinzuzufügen. Wenn Sie es sortieren, wenn Sie denken, es wäre eine nützliche Ergänzung zu den Tipps und Tricks Handbuch wäre ich wirklich daran interessiert, es hinzuzufügen (wenn you39re gerne den Code freizugeben :-)) Vielen Dank für das Lesen. Die Antwort ist ja w3schools / html / htmllinks. asp war mein Freund. Traurig versucht, den Code in die Kommentare hier verwirrt den Blog und es versucht, eine Verknüpfung mit der URL anstatt es anzuzeigen :-(. Aber fügen Sie einfach einen Beispiel-Link pro w3schools Seite oben auf die Zeile, die den Text für Ihren Hyperlink hinzufügt. Die einzige halb-tricky Sache, die ich tun musste, war, den Link (mit Tags) in einzelne Sprachmarken statt der doppelten Sprachmarken setzen, da die URL in doppelten Sprachpunkten sein musste. Das einzige wirkliche Problem dann, dass, um zu sein Es zu erreichen, müssen Sie die Maus so weit verschieben, dass die Tooltip verschwindet (Natürlich kann dies durch mehrere Mittel gelöst werden, je nachdem, was39s für die Tooltip geeignet ).So ja .. Große Frage und eine tatsächliche Antwort Snap Ich habe alle aufgeregt und didn39t lesen Ihre Post richtig Nun, da ich habe Ich sehe, dass ich das gleiche Problem, dass Sie sind Ich denke, dass es eine Lösung, aber es geht um die Blockierung von Mausereignissen. Ich frage mich, ob wir in einer Hühnerei / Ei-Situation, wo wir tun können Eine Sache, aber das hindert uns daran, andere zu tun. Hmm Danke für die schnelle Antwort. Ich habe versucht, dass, und ich habe eine Verzögerung in der Mouseout-Übergang, so dass ich tatsächlich bewegen kann die Maus über und klicken Sie auf die Tooltip, bevor es verschwindet. Der Text wird in der Tooltipp-Datei als Hyperlink formatiert, aber beim Klicken auf ihn wird nichts erreicht (die Zielseite wird nicht geöffnet). Bin ich etwas fehlt Yeah. Ich glaube, wir fehlen etwas. Ich bekomme das Gefühl, dass wir, indem wir ein Mausereignis als Trigger verwenden, dann die Mausaktion an die Tooltip binden, sodass, während der Hyperlink auftaucht, die Maus immer noch an das Ursprungsobjekt gebunden ist und den Link ignoriert. Meine Erfahrung in diesem Bereich ist leider fehlt I39m Angst. Das ist meine beste Vermutung. Wenn it39s ein 39must have39 für Ihre Visualisierung haben, stellen Sie eine Frage auf stack exchange. Es gibt ein paar Leute in diesem Forum mit einigen seltenen Fähigkeiten. Leider konnte ich nicht mehr helfen. Gute Frage. Das Geheimnis besteht darin, den Teil des Textes zu wickeln, den Sie mit einem Tag verknüpfen möchten (was nach dem Ton, den Sie bereits getan haben) und dann die Zeiger-Ereignisse zu entfernen: kein Attribut aus dem Style-Bereich (sonst ignoriert die Maus) Das Vorhandensein der Werkzeugspitze). Ich habe ein Beispiel auf bl. ocks. org für Ihre Durchsicht (bl. ocks. org/d3noob/c37cb8e630aaef7df30d) generiert. Nochmals gute Frage :-). Tatsächlich änderte ich auch die Weise, die der Werkzeugtipp erscheint und verschwindet, damit es mehr eine Wahrscheinlichkeit erhält, auf dem Schirm zu bleiben, wenn Sie die Maus weg vom Punkt auf dem Diagramm bewegen. Hey, Ich versuche, ein einfaches Scatterplot mit Tooltip zu erstellen. Meine CSV-Datei ist das Land, x, y, Ich möchte nur, dass der Name des Landes (ampx, y) Pop-up-Etikett jedes Datenpunkt mit der Maus über (es gibt 200 gruppiert zusammen um einen Ursprung so seine ein wenig unordentlich zu lable). Einfache Problem, auf der Suche nach einfachen Lösung Hmm. Gerade weg mein erster Gedanke ist, die Daten vor dem Zeichnen der Masse zu massieren. Es könnte dynamisch mit einem PHP-Skript, dass die csv geladen, Massagen und Ausgänge als JSON (oder CSV wieder) erfolgen. Nicht ganz einfach aber (wenn Sie nicht mit PHP vertraut sind). Ich habe das Gefühl, dass es eine Methode zur Verfügung innerhalb d339s Array-Funktionen (github / mbostock / d3 / wiki / Arrays oder diese Seite kann helfen, bl. ocks. org/phoebebright/raw/3176159/), aber I39m sorry zu sagen, dass ich Haven39t verwendet sie ernst. Wenn Sie ein Beispiel auf bl. ocks. org zusammenstellen können, damit die Leute eine spätere Frage zum Stapelüberlauf kommentieren, kann dies zu einer Antwort führen. Gute Frage. TY für die Anweisungen. Kann ich fragen, für Beratung Bei Mouseover, mein Code nicht halten die URL in Sicht, wenn der Cursor auf die URL. Die URL ist anklickbar, aber sie verschwindet beim Bewegen Ich verschiebe den Cursor. Haben verschiedene Dauern versucht, aber nicht immer die gleichen Ergebnisse in Ihrem Diagramm Beispiel gezeigt. Hier ist ein gist gith. github / gigster99 / 63e28838793dcc498339, das auch einen Link zum Testfall (unten) enthält. Wie sollte ich den Code aktualisieren, um die gleichen Ergebnisse wie in Diagramm Ahh. Gute Frage und sorry für die unentschuldbare Verzögerung in der Beantwortung. In Ihrem Fall (und der oben) verschwindet die URL, weil, wenn die Maus sich von dem Objekt bewegt, es sofort versuchen wird, wegzugehen. Allerdings können Sie beachten, dass es einen zusätzlichen Link in der Post (die ich in 201), die Links zu einem neuen Beitrag zeigt, wie zu erreichen, etwas sehr ähnlich, was youy39re auf der Suche nach d3noob. org/2014/05/including-html erreichen - link-in-d3js-tool-tip. html. Überprüfen Sie, dass aus und sehen, wie Sie auf