D3.js - Zoom-API

Durch Zoomen können Sie Ihre Inhalte skalieren. Mit dem Click-and-Drag-Ansatz können Sie sich auf eine bestimmte Region konzentrieren. In diesem Kapitel werden wir die Zoom-API ausführlich behandeln.

API konfigurieren

Sie können die Zoom-API mithilfe des folgenden Skripts direkt von „d3js.org“ laden.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

Zoomen von API-Methoden

Im Folgenden finden Sie einige der am häufigsten verwendeten Zoom-API-Methoden.

d3.zoom()
zoom(selection)
zoom.transform (Auswahl, Transformation)
zoom.translateBy (Auswahl, x, y)
zoom.translateTo (Auswahl, x, y)
zoom.scaleTo (Auswahl, k)
zoom.scaleBy (Auswahl, k)
zoom.filter([filter])
zoom.wheelDelta([delta])
zoom.extent([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on (Typnamen [, Listener])

Lassen Sie uns alle diese Zooming-API-Methoden kurz durchgehen.

d3.zoom ()

Es wird ein neues Zoomverhalten erstellt. Wir können mit dem folgenden Skript darauf zugreifen.

<script>
   var zoom = d3.zoom();
</script>

Zoom (Auswahl)

Es wird verwendet, um die Zoomtransformation auf ein ausgewähltes Element anzuwenden. Beispielsweise können Sie ein Verhalten von mousedown.zoom mithilfe der folgenden Syntax instanziieren.

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (Auswahl, Transformation)

Hiermit wird die aktuelle Zoomtransformation der ausgewählten Elemente auf die angegebene Transformation eingestellt. Beispielsweise können wir die Zoomtransformation mithilfe der folgenden Syntax auf die Identitätstransformation zurücksetzen.

selection.call(zoom.transform, d3.zoomIdentity);

Mit der folgenden Syntax können wir die Zoomtransformation auch für 1000 Millisekunden auf die Identitätstransformation zurücksetzen.

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (Auswahl, x, y)

Es wird verwendet, um die aktuelle Zoomtransformation der ausgewählten Elemente um x- und y-Werte zu übersetzen. Sie können x- und y-Übersetzungswerte entweder als Zahlen oder als Funktionen angeben, die Zahlen zurückgeben. Wenn eine Funktion für das ausgewählte Element aufgerufen wird, wird sie durch das aktuelle Datum 'd' und den Index 'i' für DOM geleitet. Ein Beispielcode ist unten definiert.

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (Auswahl, x, y)

Es wird verwendet, um die aktuelle Zoomtransformation der ausgewählten Elemente an die angegebene Position von x und y zu übersetzen.

zoom.scaleTo (Auswahl, k)

Es wird verwendet, um die aktuelle Zoomtransformation der ausgewählten Elemente auf zu skalieren k. Hier,k ist ein Skalierungsfaktor, der als Zahlen oder Funktionen angegeben wird.

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (Auswahl, k)

Es wird verwendet, um die aktuelle Zoon-Transformation der ausgewählten Elemente um zu skalieren k. Hier,k ist ein Skalierungsfaktor, der entweder als Zahlen oder als Funktionen angegeben wird, die Zahlen zurückgeben.

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([filter])

Hiermit wird der Filter auf die angegebene Funktion für das Zoomverhalten eingestellt. Wenn der Filter nicht angegeben ist, wird der aktuelle Filter wie unten gezeigt zurückgegeben.

function filter() {
   return !d3.event.button;
}

zoom.wheelDelta ([Delta])

Der Wert von Δwird von der Rad-Delta-Funktion zurückgegeben. Wenn kein Delta angegeben ist, wird die aktuelle Rad-Delta-Funktion zurückgegeben.

zoom.extent ([Umfang])

Es wird verwendet, um die Ausdehnung auf die angegebenen Array-Punkte festzulegen. Wenn die Ausdehnung nicht angegeben wird, wird der aktuelle Extent-Accessor zurückgegeben, der standardmäßig [[0, 0], [Breite, Höhe]] ist, wobei width die Clientbreite des Elements und height die Clienthöhe ist.

zoom.scaleExtent ([Umfang])

Es wird verwendet, um die Skalierungsausdehnung auf das angegebene Array von Zahlen [k0, k1] einzustellen. Hier,k0ist der minimal zulässige Skalierungsfaktor. Während,k1ist der maximal zulässige Skalierungsfaktor. Wenn die Ausdehnung nicht angegeben ist, wird die aktuelle Ausdehnung der Skalierung zurückgegeben, die standardmäßig [0, ∞] ist. Betrachten Sie den unten definierten Beispielcode.

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

Der Benutzer kann versuchen, durch Drehen zu zoomen, wenn er sich bereits an der entsprechenden Grenze der Skalenausdehnung befindet. Wenn Sie das Scrollen bei der Radeingabe unabhängig von der Skalierungsausdehnung verhindern möchten, registrieren Sie einen Radereignis-Listener, um das Standardverhalten des Browsers zu verhindern.

zoom.translateExtent ([Umfang])

Wenn die Ausdehnung angegeben ist, wird die Übersetzungsausdehnung auf das angegebene Punktarray festgelegt. Wenn die Ausdehnung nicht angegeben ist, wird die aktuelle Übersetzungsausdehnung zurückgegeben, die standardmäßig [[-∞, -∞], [+ ∞, + ∞]] lautet.

zoom.clickDistance ([Entfernung])

Diese Methode wird verwendet, um die maximale Entfernung festzulegen, um die sich der zoombare Bereich zwischen Auf und Ab bewegen kann, wodurch ein nachfolgendes Klickereignis ausgelöst wird.

zoom.duration ([Dauer])

Diese Methode wird verwendet, um die Dauer für Zoomübergänge beim Doppelklicken und Doppelklicken auf die angegebene Anzahl von Millisekunden festzulegen und das Zoomverhalten zurückzugeben. Wenn die Dauer nicht angegeben wird, wird die aktuelle Dauer zurückgegeben, die standardmäßig 250 Millisekunden beträgt (siehe unten).

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate ([interpolieren])

Diese Methode wird verwendet, um Zoomübergänge zur angegebenen Funktion zu interpolieren. Wenn keine Interpolation angegeben ist, wird die aktuelle Interpolationsfactory zurückgegeben, die standardmäßig d3.interpolateZoom ist.

zoom.on (Typnamen [, Listener])

Wenn der Listener angegeben ist, legt er den Ereignis-Listener für die angegebenen Typnamen fest und gibt das Zoomverhalten zurück. Der Typname ist eine Zeichenfolge, die einen oder mehrere durch Leerzeichen getrennte Typnamen enthält. Jeder Typname ist ein Typ, optional gefolgt von einem Punkt (.) Und einem Namen, z. B. zoom.one und zoom.second. Mit dem Namen können mehrere Listener für denselben Typ registriert werden. Dieser Typ muss aus einem der folgenden stammen:

Start - Nach dem Zoomen (z. B. beim Herunterfahren).
Zoom - nach einer Änderung der Zoomtransformation (z. B. bei Mausbewegung).
End - Nach dem Ende des Zooms (z. B. beim Mouseup).

Im nächsten Kapitel werden wir die verschiedenen Anforderungs-APIs in D3.js diskutieren.