D3.js - Animation

D3.js prend en charge l'animation pendant la transition. Nous pouvons faire de l'animation avec une bonne utilisation de la transition. Les transitions sont une forme limitée deKey Frame Animationavec seulement deux images clés - début et fin. L'image clé de début est généralement l'état actuel du DOM et l'image clé de fin est un ensemble d'attributs, de styles et d'autres propriétés que vous spécifiez. Les transitions sont bien adaptées pour passer à une nouvelle vue sans code compliqué qui dépend de la vue de départ.

Example - Considérons le code suivant dans la page «transition_color.html».

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").style("background-color", "lightblue") 
         // make the background-color lightblue.transition()
         .style("background-color", "gray");
         // make the background-color gray
      </script>
   </body>
</html>

Ici, la couleur d'arrière-plan du document est passée du blanc au gris clair, puis au gris.

La méthode duration ()

La méthode duration () permet aux modifications de propriétés de se produire de manière fluide sur une durée spécifiée plutôt que de manière instantanée. Faisons la transition qui prend 5 secondes en utilisant le code suivant.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.selectAll("h3").transition().style("color","green").duration(5000);
      </script>
   </body>
</html>

Ici, les transitions se sont déroulées en douceur et uniformément. Nous pouvons également attribuer une valeur de code de couleur RVB directement en utilisant la méthode suivante.

d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);

Désormais, chaque numéro de couleur passe lentement, régulièrement et uniformément de 0 à 150. Pour obtenir le mélange précis des images intermédiaires de la valeur de l'image de début à la valeur de l'image de fin, D3.js utilise une méthode d'interpolation interne. La syntaxe est donnée ci-dessous -

d3.interpolate(a, b)

D3 prend également en charge les types d'interpolation suivants -

  • interpolateNumber - prend en charge les valeurs numériques.

  • interpolateRgb - couleurs de support.

  • interpolateString - chaîne de soutien.

D3.js prend soin d'utiliser la méthode d'interpolation appropriée et dans les cas avancés, nous pouvons utiliser les méthodes d'interpolation directement pour obtenir le résultat souhaité. Nous pouvons même créer une nouvelle méthode d'interpolation, si nécessaire.

La méthode delay ()

La méthode delay () permet à une transition d'avoir lieu après un certain laps de temps. Considérez le code suivant dans «transition_delay.html».

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Simple transitions </h3>
      <script>
         d3.selectAll("h3").transition()
            .style("font-size","28px").delay(2000).duration(2000);
      </script>
   </body>
</html>

Cycle de vie de la transition

La transition a un cycle de vie en quatre phases -

  • La transition est programmée.
  • La transition commence.
  • La transition s'exécute.
  • La transition se termine.

Passons en revue chacun de ces éléments un par un en détail.

La transition est programmée

Une transition est planifiée lors de sa création. Quand nous appelonsselection.transition, nous planifions une transition. C'est aussi quand on appelleattr(), style() et d'autres méthodes de transition pour définir l'image clé de fin.

La transition commence

Une transition démarre en fonction de son délai, qui a été spécifié lors de la planification de la transition. Si aucun délai n'a été spécifié, la transition démarre dès que possible, ce qui est généralement après quelques millisecondes.

Si la transition a un retard, la valeur de départ ne doit être définie que lorsque la transition commence. Nous pouvons le faire en écoutant l'événement de départ -

d3.select("body")
   .transition()
   .delay(200)
   .each("start", function() { d3.select(this).style("color", "green"); })
   .style("color", "red");

La transition s'exécute

Lorsque la transition s'exécute, elle est invoquée à plusieurs reprises avec des valeurs de transition allant de 0 à 1. En plus du délai et de la durée, les transitions facilitent le contrôle de la synchronisation. L'accélération déforme le temps, par exemple pour ralentir et ralentir. Certaines fonctions d'accélération peuvent temporairement donner des valeurs de t supérieures à 1 ou inférieures à 0.

La transition se termine

L'heure de fin de la transition est toujours exactement 1, de sorte que la valeur de fin est définie exactement quand la transition se termine. Une transition se termine en fonction de la somme de son retard et de sa durée. Lorsqu'une transition se termine, l'événement de fin est distribué.