La función d3.easePolyInOut() en d3.js se usa como un alias para la función d3.easePoly. Esta función se utiliza para dar un efecto de transición de aceleración simétrica a un elemento en particular. Esta función devuelve una función polinomial.
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 o rectángulo o cualquier otra forma y agréguelo al SVG. Establezca algunos atributos de la forma particular 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.easePolyInOut como parámetro para esta función.
Sintaxis:
svg.append().attr().ease(d3.easePolyInOut).attr();
Parámetro: Esta función no acepta ningún parámetro.
Valor de retorno: este método devuelve una función.
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="600px" height="600px"></svg>
<script>
var svg = d3.select("svg")
svg.append("rect")
.attr("x", 50)
.attr("width", 10)
.attr("height", 10)
.attr("fill", "green")
.transition()
.ease(d3.easePolyInOut)
.attr("width", 100)
.attr("height", 100)
.attr("fill", "red")
.duration(1000);
</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="600px" height="600px"></svg>
<script>
var svg = d3.select("svg")
svg.append("circle")
.attr("r", 0)
.attr("cx", 100)
.attr("cy", 50)
.attr("fill", "green")
.transition()
.delay(8000)
.ease(d3.easePolyInOut)
.attr("r", 50)
.duration(1000);
</script>
</body>
</html>
Producción:
