La función d3.easePolyIn() en d3.js se usa para el efecto de transición de aceleración exponencial polinomial a un elemento en particular. Esta función de aceleración exponencial eleva el tiempo a la potencia del exponente dado.
Sintaxis:
d3.easePolyIn // Or d3.easePolyIn.exponent(t);
Parámetros: 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.
Valor de retorno: esta función no tiene valor de retorno.
Enfoque: la función de transición D3.js se utilizará para aplicar diferentes efectos de aceleración en un elemento en particular. Primero, 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 del rectángulo 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.easePolyIn o d3.easePolyIn.exponent(t) como parámetro para facilitar la función.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<svg width="500px" height="500px"></svg>
<script>
var svg = d3.select("svg")
.attr("transform","translate(0,-50)");
svg.append("rect")
.attr("x", 10)
.attr("y",50)
.attr("width",150)
.attr("height",50)
.attr("fill", "green")
.transition()
// Use of d3.easePolyIn
.ease(d3.easePolyIn)
.attr("x", 100)
.attr("y",100)
.attr("width",150)
.attr("height",200)
.duration(2000);
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<svg width="500px" height="500px"></svg>
<script>
var svg = d3.select("svg")
.attr("transform","translate(0,-50)");
svg.append("rect")
.attr("x", 10)
.attr("y",50)
.attr("width",150)
.attr("height",50)
.attr("fill", "green")
.transition()
// Use of d3.easePolyIn
.ease(d3.easePolyIn.exponent(50))
.attr("x", 100)
.attr("y",100)
.attr("width",150)
.attr("height",200)
.duration(2000);
</script>
</body>
</html>
Producción:
