Función D3.js selección.transición()

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *