La función d3.easePolyOut() en d3.js se usa para el efecto de transición de aceleración exponencial inversa a un elemento en particular. Si no se especifica el exponente, el valor predeterminado es tres.
Enfoque: la función de transición D3.js se utilizará para aplicar diferentes efectos de aceleración en un elemento en particular. En primer lugar, cree un elemento SVG y agréguelo al cuerpo de la página HTML, luego cree un rectángulo o cualquier otra forma y agréguelo al SVG. Establezca algunos atributos de la forma aplicada para darle un buen color y tamaño y aplique la función d3.transition seguida de la función de facilidad() y proporcione d3.easePolyOut como un parámetro para facilitar la función.
Sintaxis:
d3.easePolyOut
o
d3.easePolyOut.exponent(t);
Parámetro: Esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación.
- t: Es el tiempo que se va a elevar a la potencia del exponente.
Valores devueltos: esta función no devuelve nada.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h1 style="color:green">Geeks for Geeks</h1>
<svg width="500px" height="500px"></svg>
<script>
var svg = d3.select("svg")
.attr("transform", "translate(0, -50)");
svg.append("rect")
.attr("x", 20)
.attr("y", 60)
.attr("width", 150)
.attr("height", 150)
.attr("fill", "green")
.transition()
.ease(d3.easePolyOut)
// .delay(6000)
.attr("x", 100)
.attr("y", 100)
.attr("width", 10)
.attr("height", 10)
.duration(2000);
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
</head>
<script type="text/javascript" src=
"https://d3js.org/d3.v4.min.js">
</script>
<body>
<h1 style="color:green"> Geeks for Geeks</h1>
<svg width="500px" height="500px"></svg>
<script>
var svg = d3.select("svg")
.attr("transform", "translate(0, -50)");
svg.append("rect")
.attr("x", 20)
.attr("y", 60)
.attr("width", 150)
.attr("height", 150)
.attr("fill", "green")
.transition()
.ease(d3.easePolyOut.exponent(.1))
// .delay(6000)
.attr("x", 100)
.attr("y", 100)
.attr("width", 10)
.attr("height", 10)
.duration(2000);
</script>
</body>
</html>
Producción:
