La función selection.transition() en D3.js se usa para obtener la nueva transición en la selección dada con el nombre especificado. La nueva transición solo es exclusiva con otras transiciones del mismo nombre.
Sintaxis:
selection.transition([name])
Parámetros: Esta función acepta el siguiente parámetro como se mencionó anteriormente y se describe a continuación:
- nombre: este parámetro es la instancia de transición.
Valor devuelto: esta función devuelve una nueva transición en la selección dada con el nombre especificado.
Los siguientes programas ilustran la función selection.transition() en D3.js.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js">
</script>
<style>
#GFG {
height: 200px;
width: 200px;
background-color: black;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | selection.transition() Function</h3>
<div id="GFG"></div>
<script>
d3.select("#GFG")
.transition()
.style("background-color", "red");
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | selection.transition() Function</h3>
<button onclick="triggerTransition()">Click</button>
<div>
<svg width="400px" height="200px">
<rect
id="rectArea" x="50" y="50"
width="100" height="100" stroke="black"
fill="purple" stroke-width="5"/>
</svg>
</div>
<script>
function triggerTransition(){
d3.select("#rectArea")
.transition()
.delay(100)
.duration(2000)
.attr("width", "330")
}
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA