Zoomen und Verschieben in JS / JQuery, wie wir es mit SVG tun können

Question

Zoomen und Verschieben in JS / JQuery, wie wir es mit SVG tun können

8

Ich erstelle ein Organigramm mit Tausenden von Knoten, habe aber hier ein Beispielbeispiel erstellt,

Ссылка

Wie Sie sehen können, funktioniert das Zoomen und Schwenken, aber ich möchte es hier wie hier funktionieren lassen,

Ссылка

Um genau zu sein

Ich versuche meine Geige zu machen,

Zoomen basierend auf der Position des Mauszeigers, nicht in der Mitte des Diagramms
Es gibt ein Limit für die Mindestgröße, die mein Diagramm erreichen kann, damit es nicht unsichtbar wird
Haben Sie eine Reset-Taste

Ich habe Mühe herauszufinden, wo ich anfangen soll, sollte ich weiter in die CSS-Transformation schauen oder stattdessen d3.js verwenden und alles von Grund auf neu erstellen.

Link to library - Ссылка

%Vor% %Vor%

javascript jquery css

Mathematics 29.11.2016, 11:36

quelle

1 Antwort

Tags und Links javascript jquery css

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Scala Play Vorlage vararg HtmlContent

score 2 · Accepted Answer

Das folgende Code-Snippet erfüllt die drei in Ihrer Frage angegebenen Anforderungen:

Der Zoom ist zentriert auf die Mausposition
Die Skalierung darf nicht unter MIN_ZOOM = 0.25
Die Schaltfläche Zurücksetzen stellt die ursprüngliche Position und Skalierung

Die Transformationsmatrix und die Mausposition, die im Ereignishandler mousemove beobachtet wurden, werden in Modulvariablen gespeichert und später im Ereignishandler wheel verwendet.

In meinen Tests wurde das Ereignis wheel immer ausgelöst, nachdem die Skalierung von OrgChart verarbeitet wurde. Wenn diese Verarbeitungsreihenfolge in Ihrem Fall nicht identisch oder nicht stabil ist, können Sie den Code des wheel -Ereignishandlers in ein setTimeout(fn, 0) -Konstrukt einfügen, um sicherzustellen, dass die Skalierung bereits von OrgChart durchgeführt wurde:

%Vor%

%Vor% %Vor% %Vor%

Zoomen und Verschieben in JS / JQuery, wie wir es mit SVG tun können

1 Antwort

PHP Core Warning – yii\base\ErrorException