D3.js - API de transitions

Les transitions D3 prennent une sélection d'éléments et pour chaque élément; il applique une transition à une partie de la définition courante de l'élément.

Configurer l'API

Vous pouvez configurer l'API de transition à l'aide du script suivant.

<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éthodes de l'API de transition

Passons en revue les méthodes de l'API Transition en détail.

Sélection d'éléments

Discutons en détail des différents éléments de sélection.

• selection.transition([name])- Cette méthode est utilisée pour renvoyer une nouvelle transition de sélection avec le nom. Si aucun nom n'est spécifié, il renvoie null.

• selection.interrupt([name]) - Cette méthode est utilisée pour interrompre les éléments sélectionnés de la transition avec le nom et est définie ci-dessous.

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

• d3.interrupt(node[, name]) - Cette méthode est utilisée pour interrompre la transition du nom spécifié sur le nœud spécifié.

• d3.transition([name]) - Cette méthode est utilisée pour renvoyer une nouvelle transition avec le nom spécifié.

• transition.select(selector) - Cette méthode est utilisée pour sélectionner le premier élément qui correspond au sélecteur spécifié et renvoie une transition sur la sélection résultante, qui est définie ci-dessous.

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

• transition.selectAll(selector)- Cette méthode est utilisée pour sélectionner tous les éléments qui correspondent au sélecteur spécifié et renvoie une transition sur la sélection résultante. Il est défini ci-dessous -

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

• transition.filter(filter) - Cette méthode permet de sélectionner les éléments correspondant au filtre spécifié, ils sont définis ci-dessous.

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

• transition.merge(other)- Cette méthode est utilisée pour fusionner la transition avec une autre transition. Il est défini ci-dessous.

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

• transition.transition()- Cette méthode permet de renvoyer une nouvelle transition sur les éléments sélectionnés. Il est prévu de démarrer lorsque la transition s'arrête. La nouvelle transition hérite du nom, de la durée et de l'accélération de cette transition.

Example - Prenons l'exemple suivant.

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();

Ici, le corps passe au jaune et commence à peine cinq secondes avant la dernière transition.

• d3.active(node[, name]) - Cette méthode est utilisée pour renvoyer la transition sur le nœud spécifié avec le nom.

Méthodes de chronométrage

Passons en revue les méthodes de l'API de synchronisation de transition en détail.

• transition.delay([value])- Cette méthode est utilisée pour régler le délai de transition sur la valeur spécifiée. Si une fonction est évaluée pour chaque élément sélectionné, elle est passée à la donnée courante «d» et à l'index «i», avec le contexte comme élément DOM courant. Si aucune valeur n'est spécifiée, renvoie la valeur actuelle du délai pour le premier élément (non nul) de la transition. Il est défini ci-dessous,

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

• transition.duration([value])- Cette méthode est utilisée pour définir la durée de transition sur la valeur spécifiée. Si aucune valeur n'est spécifiée, renvoie la valeur actuelle de la durée du premier élément (non nul) de la transition.

• transition.ease([value])- Cette méthode est utilisée pour faciliter la valeur de transition pour les éléments sélectionnés. La fonction d'accélération est appelée pour chaque image de l'animation et passe le temps normalisé «t» dans la plage [0, 1]. Si aucune valeur n'est spécifiée, elle renvoie la fonction d'accélération actuelle pour le premier élément (non nul) de la transition.

Dans le chapitre suivant, nous discuterons du concept de glisser-déposer dans d3.js.