D3.js - API di zoom

Lo zoom aiuta a ridimensionare i tuoi contenuti. È possibile concentrarsi su una particolare regione utilizzando l'approccio del clic e del trascinamento. In questo capitolo, discuteremo in dettaglio dell'API di zoom.

Configurazione dell'API

È possibile caricare l'API di zoom direttamente da "d3js.org" utilizzando il seguente script.

<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>

Metodi API per lo zoom

Di seguito sono riportati alcuni dei metodi API di zoom più comunemente utilizzati.

  • d3.zoom()
  • zoom(selection)
  • zoom.transform (selezione, trasformazione)
  • zoom.translateBy (selezione, x, y)
  • zoom.translateTo (selezione, x, y)
  • zoom.scaleTo (selezione, k)
  • zoom.scaleBy (selezione, 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 (typenames [, listener])

Esaminiamo brevemente tutti questi metodi API di zoom.

d3.zoom ()

Crea un nuovo comportamento di zoom. Possiamo accedervi utilizzando lo script qui sotto.

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

zoom (selezione)

Viene utilizzato per applicare la trasformazione dello zoom su un elemento selezionato. Ad esempio, puoi creare un'istanza di un comportamento mousedown.zoom utilizzando la sintassi seguente.

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

zoom.transform (selezione, trasformazione)

Viene utilizzato per impostare la trasformazione di zoom corrente degli elementi selezionati sulla trasformazione specificata. Ad esempio, possiamo reimpostare la trasformazione dello zoom sulla trasformazione dell'identità utilizzando la sintassi seguente.

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

È anche possibile reimpostare la trasformazione dello zoom sulla trasformazione dell'identità per 1000 millisecondi utilizzando la sintassi seguente.

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

zoom.translateBy (selezione, x, y)

Viene utilizzato per tradurre l'attuale trasformazione dello zoom degli elementi selezionati in valori xey. È possibile specificare i valori di conversione xey come numeri o come funzioni che restituiscono numeri. Se una funzione viene invocata per l'elemento selezionato, viene passata attraverso il dato corrente "d" e l'indice "i" per DOM. Un codice di esempio è definito di seguito.

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 (selezione, x, y)

Viene utilizzato per tradurre la trasformazione dello zoom corrente degli elementi selezionati nella posizione specificata di x e y.

zoom.scaleTo (selezione, k)

Viene utilizzato per ridimensionare la trasformazione dello zoom corrente degli elementi selezionati a k. Qui,k è un fattore di scala, specificato come numeri o funzioni.

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

zoom.scaleBy (selezione, k)

Viene utilizzato per scalare la trasformazione zoon corrente degli elementi selezionati di k. Qui,k è un fattore di scala, specificato come numeri o come funzioni che restituiscono numeri.

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 ([filtro])

Viene utilizzato per impostare il filtro sulla funzione specificata per il comportamento dello zoom. Se il filtro non è specificato, restituisce il filtro corrente come mostrato di seguito.

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

zoom.wheelDelta ([delta])

Il valore di Δviene restituito dalla funzione delta della ruota. Se delta non è specificato, restituisce la funzione delta della ruota corrente.

zoom.extent ([extent])

Viene utilizzato per impostare l'estensione ai punti dell'array specificati. Se l'estensione non è specificata, restituisce la funzione di accesso dell'estensione corrente, che per impostazione predefinita è [[0, 0], [larghezza, altezza]], dove larghezza è la larghezza del client dell'elemento e altezza è la sua altezza del client.

zoom.scaleExtent ([extent])

Viene utilizzato per impostare l'estensione della scala sull'array di numeri specificato [k0, k1]. Qui,k0è il fattore di scala minimo consentito. Mentre,k1è il fattore di scala massimo consentito. Se extent non è specificato, restituisce l'estensione della scala corrente, che per impostazione predefinita è [0, ∞]. Considera il codice di esempio definito di seguito.

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

L'utente può provare a ingrandire ruotando, quando è già al limite corrispondente dell'estensione della scala. Se vogliamo impedire lo scorrimento sull'input della rotellina indipendentemente dall'estensione della scala, registrare un listener di eventi della rotellina per impedire il comportamento predefinito del browser.

zoom.translateExtent ([extent])

Se l'estensione è specificata, imposta l'estensione di traslazione sull'array di punti specificato. Se l'estensione non è specificata, restituisce l'estensione di traduzione corrente, che per impostazione predefinita è [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([distanza])

Questo metodo viene utilizzato per impostare la distanza massima che l'area zoomabile può spostarsi tra l'alto e il basso, che attiverà un successivo evento di clic.

zoom.duration ([duration])

Questo metodo viene utilizzato per impostare la durata delle transizioni di zoom al doppio clic e doppio tocco sul numero di millisecondi specificato e restituisce il comportamento dello zoom. Se la durata non è specificata, restituisce la durata corrente, che per impostazione predefinita è 250 millisecondi, definita di seguito.

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

zoom.interpolate ([interpolate])

Questo metodo viene utilizzato per interpolare per le transizioni di zoom alla funzione specificata. Se interpolate non è specificato, restituisce il factory di interpolazione corrente, il cui valore predefinito è d3.interpolateZoom.

zoom.on (typenames [, listener])

Se il listener è specificato, imposta il listener di eventi per i nomi dei tipi specificati e restituisce il comportamento dello zoom. I nomi dei tipi sono una stringa contenente uno o più nomi di tipi separati da spazi. Ogni nome di tipo è un tipo, facoltativamente seguito da un punto (.) E da un nome, come zoom.one e zoom.second. Il nome consente di registrare più listener per lo stesso tipo. Questo tipo deve essere uno dei seguenti:

  • Start - dopo l'inizio dello zoom (ad esempio su mousedown).

  • Zoom - dopo una modifica alla trasformazione dello zoom (come su mousemove).

  • End - al termine dello zoom (ad esempio su mouseup).

Nel prossimo capitolo, discuteremo le diverse API delle richieste in D3.js.