D3.js easeLinear() Function

Last Updated : 29 Sep, 2020

The d3.easeLinear() function in d3.js is used to linear easing the transition effect to a particular element. This linear easing function returns an identity function.

Syntax:

d3.easeLinear

Parameter: This function does not accept any parameters.

Return Values: This function does not return any value.

Approach:

D3.js transition function will be used for applying different easing effects on a particular element. First, create an SVG element and append it to the body of the HTML page, then create a circle and append it to the SVG. Set some attributes of the circle to give it nice color and size and apply the d3.transition function followed by ease() function and give the d3.easeLinear as a parameter to ease function.

Below given are a few examples of the function given above.

Example 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>

Output:

Example 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>