Animaciones

Transiciones – d3-transition

Para crear transiciones usamos la función selection.transition() sobre una selección.

Input

<style>
  #contenedor1 {
    height: 100px;
    width: 600px;
    margin: 12px auto;
    background-color: gold;
  }
</style>

<div id="contenedor1"></div>

<script>
  d3.select("#contenedor1")
    .transition()     // Creamos una transición
    .duration(3000)   // - Tiempo que tardará
    .delay(2000)      // - Tiempo en espera antes de activar la transición
      .style("background-color", "navy");
</script>

Output

Desenvoltura de transiciones – d3-ease

Podemos definir como se comportan las transiciones mediante diferentes funciones que flexibilizan el movimiento de transición. Simplemente la aplicamos mediante la función transition.ease() a una transición (por defecto easeCubicInOut()).

Comparación entre diferentes funciones de transición

Explorador de funciones de transición

Los nombres de las diferentes funciones se pueden observar en el explorador de funciones, además de en la documentación de d3-ease.

Input

<style>
  #contenedor2 {
    height: 100px;
    width: 600px;
    margin: 12px auto;
    background-color: dodgerblue;
  }
</style>
<div id="contenedor2"></div>

<script>
  d3.select("#contenedor2")
     .transition()
     .duration(4000)
     .delay(4000)
     .ease(d3.easeElasticOut)   // Indicamos la función de transición flexible
       .style("width", "200px");
</script>

Output