Ich versuche einen Teil dieses obigen Beispiels neu zu schreiben, um es in meinem Code zu verwenden, speziell dieses Stück:
%Vor%Ich bleibe jedoch hängen, da sich das v4-Paket ziemlich verändert hat. Ich habe meine ZoomListener-Funktion als
geschrieben %Vor%und ich weiß, dass sich laut dem Dokument die Dinge geändert haben und die Informationen nicht mehr auf meinem ZoomListener gespeichert sind D3 V4-Versionshinweis auf Zoom Ich denke, ich bin nur verwirrt darüber, wie Ich nehme es mit der neuen Version vor. Die letzten Zeilen meiner centerNode-Funktion funktionieren nicht, was dazu führt, dass beim Zentrieren des Knotens das Zoomen und Verschieben zurückgesetzt wird ...
Irgendwelche Vorschläge?
Nach vielen Ausgrabungen und Versuchen habe ich eine Antwort gefunden, die ziemlich gut für meine Zwecke funktioniert. Beachten Sie, dass dieser Code unten nur der relevante Teil meines Codes ist, nicht der gesamte Code, bestimmte Variablen waren selbsterklärend und haben sie daher nicht enthalten. AUCH DIES IST IN VERSION 4 von d3.js.
%Vor%Wie in den Beispielen für v4 auf der Seite d3.js beschrieben, habe ich ein Rechteck verwendet, um den Zoom auf
anzuwendenDas Zoom-Verhalten wird auf ein unsichtbares Rechteck angewendet, das das SVG überlagert Element; Dies stellt sicher, dass es Eingaben empfängt, und dass der Zeiger Koordinaten werden von der Transformation des Zoomverhaltens nicht beeinflusst. Pan & amp; Zoom Beispiel
In der Funktion Knoten zentrieren verwende ich d3.zoomTransform(zoomer.node()); , um die aktuelle Transformation auf die Seite anzuwenden.
Der Zweck dieser Funktion ist nur, den zusammenklappbaren Baum vertikal und nicht horizontal zu zentrieren, also behalte ich die aktuelle transform.x (hier t.x ) gleich.
Die Koordinate in meiner Svg ist flip, also warum y= source.x0 , Quelle ist ein welcher Knoten wurde in meiner zusammenklappbaren Baum angeklickt. ("Sehen Sie sich das Beispiel an, auf das oben in diesem Thread verwiesen wird, um zu verstehen, was ich in Version 4 zu konvertieren versuche)
Ich verwende die Transformation auf mein G-Element und dann möchte ich diese Änderungen an der Zoom-Transformation festschreiben. Dazu benutze ich .on("end", function(){}) , sonst macht sie seltsames Verhalten beim Übergang, indem sie das alles tut setzt den aktuellen Status der Transformation.
Diese Zeile oben wendet eine Übersetzung von x und y an und eine Skala - die gleich ist wie der aktuelle Zustand - an die Identifizierungsmatrix muss eine neue Transformation für G erhalten, dann wende ich sie an zoomer an. Das ist das Element, das ich zoom früher genannt habe.
Das hat wie ein Zauber für mich funktioniert!
Der Aufruf von transform.scale und transform.translate gibt eine neue Transformation zurück und ändert nichts. Deshalb:
(An dieser Stelle ist zoomListener ein ziemlich ungenauer Name dafür, aber egal ...)
k , x und y können von source abgeleitet werden, vielleicht wie du es zeigst, aber ich bin mir nicht sicher, weil ich nicht weiß was source ist. Aber für mich sieht t.x*t.k verdächtig aus, weil es die vorhandenen Transformationen x mit ihrer Skalierung multipliziert. Es scheint, als würde es eine Rückkopplungsschleife verursachen.
Weitere Informationen zum Zoom in Version 4 finden Sie unter Dieser verwandte StackOverflow-Beitrag oder dieses Beispiel von mobostock demonstriert die programmatische Kontrolle über die Zoom-Transformation eines Elements (Leinwand in diesem Fall) und enthält Übergänge.
Tags und Links javascript tree d3.js zooming d3.js-v4