D3.js time.interpolate()函数

D3.js中的time.interpolate()函数用于更改刻度的范围插值器工厂。如果未指定工厂，则返回当前插值器。

句法：

time.interpolate( interpolate )

参数：此函数接受如上所述和如下所述的单个参数：

• interpolate：此参数采用插值函数。

下面的程序说明了 D3.js 中的time.interpolate()函数：

示例 1：

HTML

  

    
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
    
  
    time.interpolate() Function 
  
    
        var time = d3.scaleTime()
  
            // Setting domain and range
            // for the scale
            .domain([1, 10])
            .range([1, 100])
  
            // Using the specified interpolation
            .interpolate(d3.interpolateRound);
  
        document.write("<h3>time(0.5): " +
            time(0.5) + "</h3>");
        document.write("<h3>time(21): " +
            time(21) + "</h3>");
        document.write("<h3>time(5.5): " +
            time(5.5) + "</h3>");
        document.write("<h3>time(1.5): " +
            time(1.5) + "</h3>");
    

  

输出：

示例 2：

HTML

  

    
    
    
    
    
    
    
    
  
    
        div {
            width: 200px;
            height: 40px;
            text-align: center;
            background-color: rgb(100, 150, 200);
        }
    

  

    
        GeeksforGeeks
    
  
    time.interpolate() Function 
  
    time(4.5)
    time(40)
    time(11.5)
    time(99.5)
    
        var time = d3.scaleTime()
  
            // Setting domain and range
            // for the scale
            .domain([0, 100])
            .range(["blue", "yellow", "green"])
  
            // Using the specified interpolation
            .interpolate(
                d3.interpolateCubehelix.gamma(0.5)
            );
  
        var color1 = time(4.5);
        var color2 = time(40);
        var color3 = time(11.5);
        var color4 = time(99.5);
        var div1 = document.querySelector(".b1")
            .style.backgroundColor = color1;
        var div2 = document.querySelector(".b2")
            .style.backgroundColor = color2;
        var div3 = document.querySelector(".b3")
            .style.backgroundColor = color3;
        var div4 = document.querySelector(".b4")
            .style.backgroundColor = color4;
    

  

输出：