D3.js easeLinear()函数

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

句法：

d3.easeLinear

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

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

方法：

D3.js 过渡函数将用于在特定元素上应用不同的缓动效果。首先，创建一个 SVG 元素并将其附加到 HTML 页面的正文中，然后创建一个圆圈并将其附加到 SVG。设置圆的一些属性以赋予它漂亮的颜色和大小，然后应用d3.transition函数，然后是ease()函数，并将d3.easeLinear作为参数传递给 ease 函数。

下面给出了上面给出的函数的几个例子。

示例 1：

HTML

  

    
    
  
      

  

    GeeksforGeeks
    
    
  
    
        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);
    

  

输出：

示例 2：

HTML

  

    
    
  
      

  

    GeeksforGeeks
  
    
    
  
    
        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);
    

  

输出：