Kennt jemand eine Möglichkeit, einen Übergang zu "spülen"? Ich habe einen Übergang wie folgt definiert:
%Vor%Ich bin mir bewusst, dass ich es tun kann
%Vor%um den Übergang zu stoppen, aber das beendet meine Animation nicht. Ich möchte in der Lage sein, den Übergang zu "leeren", der die Animation sofort beenden würde.
Wenn ich richtig verstehe (und ich nicht), gibt es dafür keine Out-of-the-Box-Lösung, ohne ein wenig unter die Haube zu gehen. Ich glaube jedoch, dass Sie die Funktionalität relativ einfach aufbauen können, wenn selection.interrupt() die von Ihnen gesuchte Form hat.
Um dies zu tun, sollten Sie eine neue Methode für d3-Selektionen erstellen, die auf die Übergangsdaten zugreifen (zu finden unter: selection.node().__transition ). Die Übergangsdaten enthalten die Daten zu den Tweens, dem Zeitgeber und anderen Übergangsdetails. Die einfachste Lösung wäre jedoch, die Dauer auf Null zu setzen, wodurch der Übergang beendet und in den Endzustand versetzt wird:
Die __transition-Datenvariable kann leere Slots (einer variablen Zahl) haben, was in Firefox zu Kummer führen kann (soweit ich weiß, wenn forEach-Schleifen verwendet werden), also habe ich einen Schlüsselansatz verwendet um den nicht leeren Slot zu erhalten, der den Übergang enthält.
%Vor% Wenn Sie mit Delays arbeiten , können Sie den Timer-Callback auch mit dem folgenden Befehl auslösen: if(slots[d]) slots[d].timer._call(); , da das Festlegen der Verzögerung auf null nicht den Übergang beeinflusst.
Mit diesem Codeblock rufen Sie selection.finish() auf, was den Übergang in seinen Endzustand erzwingt. Klicken Sie auf einen Kreis, um die Methode aufzurufen:
Natürlich, wenn Sie die Methode d3-ish beibehalten wollten, geben Sie die Auswahl zurück, damit Sie zusätzliche Methoden nachher verketten können. Aus Gründen der Vollständigkeit möchten Sie sicherstellen, dass ein Übergang zum Abschluss kommt. Mit diesen Hinzufügungen könnte die neue Methode etwa wie folgt aussehen:
%Vor%Hier ist ein bl.ock dieser vollständigeren Implementierung.
Andrews Antwort ist großartig. Aber nur aus Neugierde glaube ich, dass es möglich ist, Prototypen zu erweitern, indem man .on("interrupt" als Zuhörer benutzt.
Hier kopiere ich schamlos Andrew Code für die Übergänge und diese Antwort um das Zielattribut zu erhalten.
%Vor%Hier ist die Demo:
PS: Im Gegensatz zu Andrews Antwort , da ich d3.active(node) hier verwende, funktioniert der Klick nur, wenn der Übergang erfolgt hat bereits begonnen .
Tags und Links d3.js transition