D3.js easepolyInOut()函数

d3.js 中的d3.easePolyInOut()函数用作 d3.easePoly函数的别名。此函数用于为特定元素提供对称的缓动过渡效果。该函数返回一个多项式函数。

方法： D3.js 过渡函数将用于在特定元素上应用不同的缓动效果。首先，创建一个 SVG 元素并将其附加到 HTML 页面的正文中，然后创建一个圆形或矩形或任何其他形状并将其附加到 SVG。设置特定形状的一些属性以赋予它漂亮的颜色和大小，然后应用 d3.transition函数，然后是 ease()函数，并将 d3.easePolyInOut 作为该函数的参数。

句法：

svg.append().attr().ease(d3.easePolyInOut).attr();

参数：此函数不接受任何参数。

返回值：此方法返回一个函数。

下面给出了上面给出的函数的几个例子。

示例 1：

 
 
 
     
     
  
     
     
 
 
    GeeksforGeeks 
     
      
     
        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); 
     
 
 

输出：

示例 2：

 
 
 
     
     
  
     
     
 
 
    GeeksforGeeks 
     
      
     
       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); 
     
 
 

输出：