Ich habe ein Sticky-Force-Layout: Ссылка
Ich habe diese Funktion, die einen Knoten an eine Position zieht:
%Vor%Wenn ich das jetzt mache, möchte ich, dass es so aussieht, als würde ich es mit meiner Maus ziehen. Aber wenn ich den Knopf drücke, bewegt sich nur der gewählte Knoten. Gibt es überhaupt einen Mausklick auf den Knoten, so dass die anderen verbundenen Knoten sich damit zu bewegen scheinen?
Zum Beispiel, ich drücke den Knopf, nur ein Knoten bewegt sich und alle anderen bleiben stecken.
Aber wenn ich einen der Knoten an eine Position ziehe, bewegen sich die zugehörigen Knoten aufgrund der D3-Kraftphysik mit. Gibt es eine Möglichkeit, diese Bewegung zu simulieren?
Um den richtigen Ansatz zu wählen, ist es wichtig zu wissen, dass die Berechnungen in D3s Force-Layout von der tatsächlichen Darstellung beliebiger Elemente abgekoppelt sind. d3.layout.force() kümmert sich um die Berechnung von Bewegungen und Positionen gemäß den angegebenen Parametern. Das Rendering wird von dem mit .force("tick", renderingHandler) registrierten Handler durchgeführt. Diese Funktion wird bei jedem Tick durch das Force-Layout aufgerufen und rendert die Elemente basierend auf den berechneten Positionen.
Vor diesem Hintergrund wird deutlich, dass Ihre Lösung nicht wie erwartet funktioniert. Durch die Verwendung von Übergängen auf den grafischen Elementen werden die Knoten einfach verschoben, ohne die Daten zu aktualisieren und ohne das Force-Layout zu verwenden. Um das gewünschte Verhalten zu erhalten, müssen Sie sich an die Entkopplung von Berechnungen und Rendering halten. Dies befreit Sie von der Notwendigkeit, eine Simulation von Mausereignissen zu implementieren.
Dies könnte getan werden, indem man eine d3.timer() verwendet, die wiederholt eine Funktion aufruft, die die Einstellung setzt Bewegen der Knotenposition zu den interpolierten Werten zwischen ihren Start- und Endwerten. Nachdem diese Werte festgelegt wurden, aktiviert die Funktion das Force-Layout, um ihre Arbeit für den Rest der Knoten auszuführen, und ruft den Rendering-Handler .tick() auf, der das gesamte Layout aktualisiert.
Schauen Sie sich das folgende Snippet oder das aktualisierte JSFiddle für eine funktionierende Anpassung Ihres Codes an.
Ich habe damit herumgespielt, also dachte ich, ich könnte es genauso gut posten.
@altocumulus war zu schnell für mich!
Hier ist eine Möglichkeit, eine sehr ähnliche Sache zu machen, aber mit einem Übergang . Dies ermöglicht es Ihnen, auch auf Beschleunigungen, Verzögerungen und Verkettungen zuzugreifen, so dass es leicht ist, zu komplexeren Bewegungen zu verallgemeinern.
px und py für das ausgewählte Datenelement, um transparent mit dem Übergang zu verbinden, indem Sie die Attribute fake cx und cy des Dummy-Knotens während des Übergangs zurückgeben. end des Übergangs die Getter durch den aktuellen Wert der Dummy-Knotenattribute. Sie können weiterhin auf die Schaltfläche klicken, und der Knoten wird an zufällige Positionen gesendet.
Wenn Sie die Dummy-Knoten mithilfe der Datenbindung des Typs d3 erstellen, können Sie sie einfach verallgemeinern, um beliebig viele Knoten unisono zu verschieben. Im folgenden Beispiel werden sie nach der Eigenschaft fixed gefiltert.
Hier sind ein paar mehr Möglichkeiten, alle aufgrund der Kraft der d3 Übergänge ...
Tags und Links javascript jquery d3.js