2012-12-06 10 views
9

Die Übergang() minimiert wird Auswahl, die i verwenden, um die Position des SVG Elemente zu verschieben, wenn neue Daten in stammt, funktioniert perfekt, wenn Browser-Fenster geöffnet ist, aber Wenn ich eine andere Registerkarte öffne oder das Fenster minimiere, stapelt die Übergang() Funktion die svg Elemente übereinander. wenn ich das Fenster öffne sehe ich svg Elemente übereinander.d3.js Übergang() nicht funktioniert, wenn Browser

Die exit() Auswahl jedoch aus dem Bildschirm bewegt.

+0

Hey ich habe auch das gleiche Problem mit meinem Scatterplot, das dynamische Daten aufnimmt. Solange der Browser geöffnet ist, werden die Plots aktualisiert, aber beim Minimieren des Browsers hängt die Art der Seite. Ist es ein Speicherleck Problem ??? –

Antwort

17

D3 uses requestAnimationFrame, um ein reibungsloses und effizientes Zeichnen zu ermöglichen. Hier ist more info zum Thema. Das Grundproblem, das viele Leute haben, ist, wenn ein Fenster/Tab im Hintergrund ist, das Seitenrendering in den Schlafmodus geht und keine "Animationsframes" bereitgestellt werden, d. H. Der Browser hört auf zu zeichnen.

Sie arbeiten um, dass „Problem“ durch den Browser visibility API mit Ihrer Zeichnung steuern (zum Beispiel tun, um eine vollständige Aktualisierung Ihrer Diagramme, wenn die Seite wieder sichtbar wird). Beispiele siehe related MDN page.

+2

Schön! Ich habe dieses Problem auch in der Vergangenheit festgestellt, und diese Problemumgehung klingt vielversprechend. Ich würde denken, dass man als Alternative zu einem vollständigen Update *, wenn die Seite sichtbar wird *, entscheiden könnte, ob man 'transition()' in Abhängigkeit vom Sichtbarkeitszustand verwenden möchte oder nicht. D. h., Sie haben eine Auswahl von d3, "meineSelektion", die Sie ändern wollen, ihr "x" Attribut; Sie könnten '(document.hidden? mySelection: mySelection.transition()). attr (" x ", 12345)' aufrufen. – meetamit

+1

btw. Wenn Sie mit der Antwort zufrieden sind, akzeptieren Sie sie bitte. – Juve

+0

Sollte dies als Feature-Anfrage gemeldet werden? Ich denke, die transition() -Methode selbst sollte die Sichtbarkeit des Browsers mithilfe der API für die Sichtbarkeit der Seite sicherstellen und entsprechend animieren. Ich möchte keine komplette Aktualisierung meines Diagramms machen. Stattdessen würde ich einen Weg finden, nicht zu animieren, wenn nicht sichtbar, wie von @meetamit vorgeschlagen – arunkjn

Verwandte Themen