d3.js easePolyIn()用法及代碼示例

d3.js中的d3.easePolyIn()函數用於對特定元素的多項式 index 緩和過渡效果。此 index 緩和函數將時間增加到給定 index 的冪。

用法:

d3.easePolyIn 

// Or 

d3.easePolyIn.exponent(t);

參數：該函數接受如上所述和以下描述的單個參數：

t:現在是將時間提升為 index 冪的時候了。

返回值：該函數沒有返回值。

方法：D3.js過渡函數將用於對特定元素應用不同的緩動效果。首先，創建一個SVG元素並將其附加到HTML頁麵的主體，然後創建一個矩形或任何其他形狀並將其附加到SVG。設置矩形的一些屬性以使其具有漂亮的顏色和大小，並應用d3.transition函數，然後再應用ease()函數，並將d3.easePolyIn或d3.easePolyIn.exponent(t)作為參數來簡化函數。

範例1：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
  
    <script src =  
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
    
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
  
    <svg width="500px" height="500px"></svg> 
    <script> 
        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); 
  
    </script> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
  
    <script src =  
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
    
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
  
    <svg width="500px" height="500px"></svg> 
    <script> 
        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); 
  
    </script> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js easePolyIn() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。