La función d3.easePoly() en d3.js se usa para dar el efecto de polinomio simétrico a un elemento en particular. Esta función de polieasing se utiliza como parámetro dentro de la función d3.ease() .
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 círculo y agréguelo al SVG. Establezca algunos atributos del círculo 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.easePoly como un parámetro para facilitar la función.
Sintaxis:
svg.append().attr().ease(d3.easePoly).attr();
Parámetro: Esta función no acepta ningún parámetro.
Valor devuelto: esta función no devuelve nada.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1:
<!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">GeeksforGeeks</h1>
<svg width="500px" height="500px"></svg>
<script>
var svg = d3.select("svg")
.attr("transform", "translate(0, -50)");
svg.append("circle")
.attr("cx", 100)
.attr("r", 50)
.attr("cy", 100)
.attr("fill", "green")
.transition()
// Use of d3.easePoly function
.ease(d3.easePoly)
.attr("r", 10)
.attr("fill", "red")
.duration(1500);
</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">
<script type="text/javascript"
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")
svg.append("rect")
.attr("x", 50)
.attr("width", 10)
.attr("height", 10)
.attr("fill", "green")
.transition()
// Use of d3.easePoly function
.ease(d3.easePoly)
.attr("width", 100)
.attr("height", 100)
.attr("fill", "red")
.duration(1500);
</script>
</body>
</html>
Producción:
