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

d3.js中的d3.easeLinear()函数用于线性缓和到特定元素的过渡效果。该线性缓动函数返回一个恒等函数。

用法:

d3.easeLinear

参数：该函数不接受任何参数。

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

方法：

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

下面给出的是上面给出的函数的一些例子。

范例1：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
        content="width=device-width,  
                initial-scale=1.0"> 
  
    <script src="https://d3js.org/d3.v4.min.js"></script>   
</head> 
  
<body> 
    <h3 style="color:green">GeeksforGeeks</h3> 
    <svg width="500px" height="500px"> 
    </svg> 
  
    <script> 
        var svg = d3.select("svg"); 
          
        svg.append("circle") 
            .attr("r", 30) 
            .attr("cy",40) 
            .attr("cx",30) 
            .attr("fill", "green") 
            .transition() 
            // Use of easeLinear 
            .ease(d3.easeLinear) 
            .duration(2000) 
            .attr("cy",40) 
            .attr("cx",200); 
    </script> 
</body> 
  
</html>

输出：

范例2：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
        content="width=device-width,  
                initial-scale=1.0"> 
  
    <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() 
            // Ease linear 
            .ease(d3.easeLinear) 
            .attr("x", 100) 
            .attr("y",100) 
            .attr("width",100) 
            .attr("height",10) 
            .duration(2000); 
    </script> 
</body> 
  
</html>

输出：

相关用法

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