D3.js es una biblioteca de Javascript que se usa principalmente para documentos basados en datos. D3 hace uso de SVG como en HTML5. Muchas cosas además de hacer gráficos, agregar animaciones y visualizar datos se pueden hacer con d3.js. Las animaciones se pueden aplicar utilizando la función de transición d3.js que proporciona muchas funcionalidades como retraso, aceleración, desvanecimiento, duración, escalado y muchas más.
Enfoque: las animaciones en d3 se pueden realizar con la ayuda de las transiciones proporcionadas por D3.js. En primer lugar, cree un elemento div y agréguele texto. luego seleccione este elemento usando la función d3.select(). Después de esto, use la función de transición disponible en d3.js para aplicar animaciones en el elemento HTML seleccionado.
Ejemplo 1: este ejemplo usa la función d3.select() junto con la función d3.transition() para aplicar efectos al elemento html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>GeeksforGeeks</title>
</head>
<body>
<div>
<h3 style="color:green"> Geeks for Geeks</h3>
</div>
<script type = "text/javascript"
src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
d3.selectAll("h3").transition()
.style(
"font-size", "50px").delay(1000).duration(1000)
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
color:green;
display: flex;
margin: 0;
font-size: xx-large;
padding: 10px;
width: 100%;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<body>
<div>
<p> Geeks for Geeks</p>
</div>
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
d3.selectAll("p").transition()
.style(
"transform", "rotate(180deg)").delay(1000).duration(1000)
.style("color", "black").duration(1000)
</script>
</body>
</html>
Producción :
