D3.js easePolyOut函数

d3.js 中的d3.easePolyOut ()函数用于对特定元素的反向指数缓动过渡效果。如果未指定指数，则默认为三。

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

句法：

d3.easePolyOut 

要么

d3.easePolyOut.exponent(t);

参数：此函数接受一个如上所述和如下所述的参数。

• t：它是要提高到指数幂的时间。

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

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

示例 1：

HTML

  

    
    
  
    
    

  

    Geeks for Geeks
    
      
    
        var svg = d3.select("svg")
            .attr("transform", "translate(0, -50)");
        svg.append("rect")
            .attr("x", 20)
            .attr("y", 60)
            .attr("width", 150)
            .attr("height", 150)
            .attr("fill", "green")
            .transition()
            .ease(d3.easePolyOut)
            // .delay(6000)
            .attr("x", 100)
            .attr("y", 100)
            .attr("width", 10)
            .attr("height", 10)
            .duration(2000);
    

  

输出：

示例 2：

HTML

  

    
    



  

     Geeks for Geeks
    
      
    
        var svg = d3.select("svg")
            .attr("transform", "translate(0, -50)");
        svg.append("rect")
            .attr("x", 20)
            .attr("y", 60)
            .attr("width", 150)
            .attr("height", 150)
            .attr("fill", "green")
            .transition()
            .ease(d3.easePolyOut.exponent(.1))
            // .delay(6000)
            .attr("x", 100)
            .attr("y", 100)
            .attr("width", 10)
            .attr("height", 10)
            .duration(2000);
    

  

输出：