D3.jseasepoly()函数

d3.js 中的d3.easePoly()函数用于为特定元素提供对称多项式效应。这个 poly easing函数用作d3.ease()函数中的参数。

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

句法：

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

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

返回值：此函数不返回任何内容。

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

示例 1：

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

输出：

示例 2：

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

输出：