D3.js: API de zoom

El zoom ayuda a escalar su contenido. Puede enfocarse en una región en particular usando el enfoque de hacer clic y arrastrar. En este capítulo, analizaremos la API de zoom en detalle.

Configuración de API

Puede cargar la API de zoom directamente desde "d3js.org" utilizando el siguiente 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>

Métodos de API de zoom

A continuación se muestran algunos de los métodos de API de zoom más utilizados.

  • d3.zoom()
  • zoom(selection)
  • zoom.transform (selección, transformación)
  • zoom.translateBy (selección, x, y)
  • zoom.translateTo (selección, x, y)
  • zoom.scaleTo (selección, k)
  • zoom.scaleBy (selección, 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])

Repasemos brevemente todos estos métodos de API de zoom.

d3.zoom ()

Crea un nuevo comportamiento de zoom. Podemos acceder a él usando el siguiente script.

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

zoom (selección)

Se utiliza para aplicar la transformación de zoom en un elemento seleccionado. Por ejemplo, puede crear una instancia de un comportamiento mousedown.zoom utilizando la siguiente sintaxis.

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

zoom.transform (selección, transformación)

Se utiliza para establecer la transformación de zoom actual de los elementos seleccionados en la transformación especificada. Por ejemplo, podemos restablecer la transformación de zoom a la transformación de identidad utilizando la sintaxis siguiente.

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

También podemos restablecer la transformación de zoom a la transformación de identidad durante 1000 milisegundos utilizando la siguiente sintaxis.

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

zoom.translateBy (selección, x, y)

Se utiliza para traducir la transformación de zoom actual de los elementos seleccionados por valores xey. Puede especificar valores de traducción xey como números o como funciones que devuelven números. Si se invoca una función para el elemento seleccionado, se pasa a través del datum actual 'd' y el índice 'i' para DOM. A continuación se define un código de muestra.

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 (selección, x, y)

Se utiliza para trasladar la transformación de zoom actual de los elementos seleccionados a la posición especificada de xey.

zoom.scaleTo (selección, k)

Se utiliza para escalar la transformación de zoom actual de los elementos seleccionados a k. Aquí,k es un factor de escala, especificado como números o funciones.

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

zoom.scaleBy (selección, k)

Se utiliza para escalar la transformación de zoon actual de los elementos seleccionados por k. Aquí,k es un factor de escala, especificado como números o como funciones que devuelven números.

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

Se utiliza para establecer el filtro en la función especificada para el comportamiento del zoom. Si no se especifica el filtro, devuelve el filtro actual como se muestra a continuación.

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

zoom.wheelDelta ([delta])

El valor de Δes devuelto por la función delta de la rueda. Si no se especifica delta, devuelve la función delta de rueda actual.

zoom.extent ([extensión])

Se utiliza para establecer la extensión en los puntos de matriz especificados. Si no se especifica la extensión, devuelve el descriptor de acceso de extensión actual, cuyo valor predeterminado es [[0, 0], [ancho, alto]], donde ancho es el ancho del cliente del elemento y alto es su alto del cliente.

zoom.scaleExtent ([extensión])

Se utiliza para establecer la extensión de la escala en la matriz especificada de números [k0, k1]. Aquí,k0es el factor de escala mínimo permitido. Mientras,k1es el factor de escala máximo permitido. Si no se especifica extensión, devuelve la extensión de escala actual, que por defecto es [0, ∞]. Considere el código de muestra que se define a continuación.

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

El usuario puede intentar hacer zoom girando, cuando ya se encuentra en el límite correspondiente de la extensión de escala. Si queremos evitar el desplazamiento en la entrada de la rueda independientemente de la extensión de la escala, registre un detector de eventos de rueda para evitar el comportamiento predeterminado del navegador.

zoom.translateExtent ([extensión])

Si se especifica la extensión, establece la extensión de traducción a la matriz de puntos especificada. Si no se especifica extensión, devuelve la extensión de traducción actual, que por defecto es [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([distancia])

Este método se utiliza para establecer la distancia máxima a la que el área ampliable puede moverse entre arriba y abajo, lo que activará un evento de clic posterior.

zoom.duration ([duración])

Este método se utiliza para establecer la duración de las transiciones de zoom al hacer doble clic y tocar dos veces hasta el número especificado de milisegundos y devuelve el comportamiento de zoom. Si no se especifica la duración, devuelve la duración actual, cuyo valor predeterminado es 250 milisegundos, que se define a continuación.

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

zoom.interpolate ([interpolate])

Este método se utiliza para interpolar las transiciones de zoom a la función especificada. Si no se especifica interpolar, devuelve la fábrica de interpolación actual, que por defecto es d3.interpolateZoom.

zoom.on (typenames [, listener])

Si se especifica el detector, establece el detector de eventos para los nombres de tipo especificados y devuelve el comportamiento de zoom. Los nombres de tipos son una cadena que contiene uno o más nombres de tipos separados por espacios en blanco. Cada nombre de tipo es un tipo, seguido opcionalmente por un punto (.) Y un nombre, como zoom.one y zoom.second. El nombre permite registrar varios oyentes para el mismo tipo. Este tipo debe ser de uno de los siguientes:

  • Start - después de que comience el zoom (como al presionar el mouse).

  • Zoom - después de un cambio en la transformación de zoom (como en mousemove).

  • End - después de que finaliza el zoom (como al subir el mouse).

En el próximo capítulo, discutiremos las diferentes API de solicitudes en D3.js.