D3.js easePolyIn()函数

d3.js 中的d3.easePolyIn()函数用于对特定元素的多项式指数缓动过渡效果。这个指数缓动函数将时间提高到给定指数的幂。

句法：

d3.easePolyIn 

// Or 

d3.easePolyIn.exponent(t);

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

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

返回值：该函数没有返回值。

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

示例 1：

HTML

  

    
  
    
    

    

    GeeksforGeeks
  
    
    
        var svg = d3.select("svg")
            .attr("transform","translate(0,-50)");
  
        svg.append("rect")
            .attr("x", 10)
            .attr("y",50)
            .attr("width",150)
            .attr("height",50)
            .attr("fill", "green")
            .transition()
              
            // Use of d3.easePolyIn
            .ease(d3.easePolyIn)
            .attr("x", 100)
            .attr("y",100)
            .attr("width",150)
            .attr("height",200)
            .duration(2000);
  
    

  

输出：

示例 2：

HTML

  

    
  
    
    

    

    GeeksforGeeks
  
    
    
        var svg = d3.select("svg")
            .attr("transform","translate(0,-50)");
  
        svg.append("rect")
            .attr("x", 10)
            .attr("y",50)
            .attr("width",150)
            .attr("height",50)
            .attr("fill", "green")
            .transition()
              
            // Use of d3.easePolyIn
            .ease(d3.easePolyIn.exponent(50))
            .attr("x", 100)
            .attr("y",100)
            .attr("width",150)
            .attr("height",200)
            .duration(2000);
  
    

  

输出：