D3.js interpolateYlGnBu()函数

d3.js 中的d3.interpolateYlGnBu()函数用于返回对应于 Sequential 颜色方案的 RGB 颜色字符串。

句法：

d3.interpolateYlGnBu(t);

参数：上面给出的函数只接受一个上面给出和下面描述的参数：

• t：它是一个数值，范围在[0, 1]。

返回值：此函数返回一个字符串。

下面的示例说明了 D3.js 中的 d3.interpolateYlGnBu()函数：

示例 1：

HTML

  

    
    
  
    
    
    
    
    
    
    
    
    

  

    
        console.log(d3.interpolateYlGnBu(0.4));
        console.log(d3.interpolateYlGnBu(0.3));
        console.log(d3.interpolateYlGnBu(0.2));
        console.log(d3.interpolateYlGnBu(0.5));
        console.log(d3.interpolateYlGnBu(0.4));
        console.log(d3.interpolateYlGnBu(0.9));
        console.log(d3.interpolateYlGnBu(0.2));
        console.log(d3.interpolateYlGnBu(0));
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    
    
    
    
    
    
    
  
    
        div {
            padding: 6px;
            text-align: center;
            vertical-align: middle;
            display: flex;
            justify-content: center;
            width: 100px;
            height: 100px;
            float: left;
        }
    

  

    D3.interpolateYlGnBu() 
    
        t = 0.4
    
    
        t = 0.6
    
      
    
  
        // creating different colors for different
        // Values of t is 0.4
        let color1 =
            d3.interpolateYlGnBu(0.4);
        // Values of t is 0.6
        let color2 =
            d3.interpolateYlGnBu(0.6);
  
        // Selecting Div using query selector
        let pixel1 = document.querySelector(".pixel1");
        let pixel2 = document.querySelector(".pixel2");
  
        // Setting style and BG color of
        // the particular DIVs
        pixel1.style.backgroundColor = color1;
        pixel2.style.backgroundColor = color2;
    

  

输出：