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%
    
Mathematics 29.11.2016, 11:36
quelle

1 Antwort

2

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

  1. Der Zoom ist zentriert auf die Mausposition
  2. Die Skalierung darf nicht unter MIN_ZOOM = 0.25
    3. liegen
  3. Die Schaltfläche Zurücksetzen stellt die ursprüngliche Position und Skalierung
    4. wieder her

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%
    
ConnorsFan 02.12.2016, 21:59
quelle

Tags und Links

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