D3.js: API de transiciones

Las transiciones D3 toman una selección de elementos y para cada elemento; aplica una transición a una parte de la definición actual del elemento.

Configuración de API

Puede configurar la API de transición mediante 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>

</script>

Métodos de API de transición

Veamos en detalle los métodos de la API de transición.

Seleccionar elementos

Analicemos en detalle los diversos elementos de selección.

selection.transition([name])- Este método se utiliza para devolver una nueva transición de selección con el nombre. Si no se especifica un nombre, devuelve nulo.
selection.interrupt([name]) - Este método se utiliza para interrumpir los elementos seleccionados de la transición con el nombre y se define a continuación.

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) - Este método se utiliza para interrumpir la transición del nombre especificado en el nodo especificado.
d3.transition([name]) - Este método se utiliza para devolver una nueva transición con el nombre especificado.
transition.select(selector) - Este método se utiliza para seleccionar el primer elemento que coincide con el selector especificado y devuelve una transición en la selección resultante, que se define a continuación.

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector)- Este método se utiliza para seleccionar todos los elementos que coinciden con el selector especificado y devuelve una transición en la selección resultante. Se define a continuación:

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) - Este método se utiliza para seleccionar los elementos que coinciden con el filtro especificado, se definen a continuación.

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other)- Este método se utiliza para fusionar la transición con otra transición. Se define a continuación.

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition()- Este método se utiliza para devolver una nueva transición en los elementos seleccionados. Está programado para comenzar cuando se detenga la transición. La nueva transición hereda el nombre, la duración y la relajación de esta transición.

Example - Consideremos el siguiente ejemplo.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

Aquí, el cuerpo se vuelve amarillo y comienza solo cinco segundos antes de la última transición.

d3.active(node[, name]) - Este método se utiliza para devolver la transición en el nodo especificado con el nombre.

Métodos de cronometraje

Repasemos en detalle los métodos de API de tiempo de transición.

transition.delay([value])- Este método se utiliza para establecer el retardo de transición en el valor especificado. Si se evalúa una función para cada elemento seleccionado, se pasa al dato actual 'd' y al índice 'i', con el contexto como el elemento DOM actual. Si no se especifica un valor, devuelve el valor actual de la demora para el primer elemento (no nulo) de la transición. Se define a continuación,

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])- Este método se utiliza para establecer la duración de la transición en el valor especificado. Si no se especifica un valor, devuelve el valor actual de la duración del primer elemento (no nulo) de la transición.
transition.ease([value])- Este método se utiliza para facilitar el valor de transición de los elementos seleccionados. La función de aceleración se invoca para cada fotograma de la animación y pasa el tiempo normalizado 't' en el rango [0, 1]. Si no se especifica un valor, devuelve la función de aceleración actual para el primer elemento (no nulo) de la transición.

En el próximo capítulo, discutiremos el concepto de arrastrar y soltar en d3.js.

↰ Previous page Next page ↱