d3.js easepolyInOut()用法及代码示例

d3.js中的d3.easePolyInOut()函数用作d3.easePoly函数的别名。此函数用于为特定元素提供对称的缓和过渡效果。该函数返回多项式函数。

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

用法:

svg.append().attr().ease(d3.easePolyInOut).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="600px" height="600px"></svg>  
      
    <script>  
        var svg = d3.select("svg")   
        svg.append("rect")  
        .attr("x", 50)  
        .attr("width", 10) 
        .attr("height", 10) 
        .attr("fill", "green")  
        .transition() 
        .ease(d3.easePolyInOut)  
        .attr("width", 100) 
        .attr("height", 100) 
        .attr("fill", "red") 
        .duration(1000);  
    </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="600px" height="600px"></svg>  
      
    <script>  
       var svg = d3.select("svg")   
       svg.append("circle")  
       .attr("r", 0)  
       .attr("cx", 100) 
       .attr("cy", 50) 
       .attr("fill", "green")  
       .transition() 
       .delay(8000) 
       .ease(d3.easePolyInOut)  
       .attr("r", 50) 
       .duration(1000);  
    </script>  
</body>  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 D3.js easepolyInOut() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。