D3.js - Transición
La transición es el proceso de cambiar de un estado a otro de un artículo. D3.js proporciona unatransition()método para realizar la transición en la página HTML. Aprendamos sobre la transición en este capítulo.
El método de transición ()
El método de transición () está disponible para todos los selectores e inicia el proceso de transición. Este método soporta la mayoría de los métodos de selección tales como - attr (), style (), etc. Pero, no soporta los métodos append () y data (), que necesitan ser llamados antes que el método transition (). Además, proporciona métodos específicos para la transición como duración (), facilidad (), etc. Una transición simple se puede definir de la siguiente manera:
d3.select("body")
.transition()
.style("background-color", "lightblue");Se puede crear una transición directamente usando el método d3.transition () y luego usarse junto con los selectores de la siguiente manera.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Un ejemplo mínimo
Creemos ahora un ejemplo básico para comprender cómo funciona la transición.
Cree un nuevo archivo HTML, transition_simple.html con el siguiente código.
<!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>Aquí, hemos seleccionado el bodyelemento y luego comenzó la transición llamando al método transición (). Luego, hemos indicado que transite el color de fondo del color actual,white a light blue.
Ahora, actualice el navegador y en la pantalla, el color de fondo cambia de blanco a azul claro. Si queremos cambiar el color de fondo de azul claro a gris, podemos usar la siguiente transición:
d3.select("body").transition().style("background-color", "gray");