D3.js - Transition
La transition est le processus de changement d'un état à un autre d'un élément. D3.js fournit untransition()méthode pour effectuer la transition dans la page HTML. Apprenons la transition dans ce chapitre.
La méthode transition ()
La méthode transition () est disponible pour tous les sélecteurs et démarre le processus de transition. Cette méthode supporte la plupart des méthodes de sélection telles que - attr (), style (), etc. Mais, elle ne supporte pas les méthodes append () et data (), qui doivent être appelées avant la méthode transition (). En outre, il fournit des méthodes spécifiques à la transition comme duration (), easy (), etc. Une transition simple peut être définie comme suit -
d3.select("body")
.transition()
.style("background-color", "lightblue");Une transition peut être directement créée à l'aide de la méthode d3.transition (), puis utilisée avec les sélecteurs comme suit.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Un exemple minimal
Créons maintenant un exemple de base pour comprendre comment fonctionne la transition.
Créez un nouveau fichier HTML, transition_simple.html avec 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.select("body").transition().style("background-color", "lightblue");
</script>
</body>
</html>Ici, nous avons sélectionné le bodyélément, puis a commencé la transition en appelant la méthode transition (). Ensuite, nous avons demandé de faire transiter la couleur d'arrière-plan de la couleur actuelle,white à light blue.
Maintenant, actualisez le navigateur et sur l'écran, la couleur d'arrière-plan passe du blanc au bleu clair. Si nous voulons changer la couleur d'arrière-plan du bleu clair au gris, nous pouvons utiliser la transition suivante -
d3.select("body").transition().style("background-color", "gray");