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

d3.js中的d3.easePoly()函數用於為特定元素提供對稱多項式效果。此聚合緩動函數用作d3.ease()函數中的參數。

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

用法：

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

參數：該函數不接受任何參數。

返回值：此函數不返回任何內容。

下麵給出的是上麵給出的函數的一些例子。

範例1：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="  
     width=device-width, initial-scale=1.0">  
  
    <script type="text/javascript"
    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("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);  
    </script>  
</body>  
</html>

輸出：

範例2：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="  
    width=device-width, initial-scale=1.0">  
  
    <script type="text/javascript"
    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")   
        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);  
    </script>  
</body>  
</html>

輸出：

相關用法

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