D3.js interpolateRainbow()函数

d3.interpolateRainbow()函数用于返回一个 RGB 颜色字符串，该字符串对应于 0 到 0.5 范围内的 d3.interpolateWarm 和 0.5 到 1.0 范围内的 d3.interpolateCool ，因此它形成了循环较少生气的彩虹配色方案在 d3.js 中。

句法：

d3.interpolateRainbow(t);

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

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

返回值：此函数返回字符串RGB 颜色。

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

示例 1：

HTML

  

    
    
  
    
    
    
    
    
    
    
    
    

  

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

  

输出：

rgb(226, 183, 47)
rgb(255, 120, 71)
rgb(254, 75, 131)
rgb(175, 240, 91)
rgb(226, 183, 47)
rgb(76, 110, 219)
rgb(254, 75, 131)
rgb(110, 64, 170)

示例 2：

HTML

  

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

  

    D3.interpolateRainbow() 
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
  
    
  
        // Creating different colors for
        // different Values of t is 0
        let color1 =
            d3.interpolateRainbow(0);
  
        // Values of t is 0.1
        let color2 =
            d3.interpolateRainbow(0.1);
  
        // Values of t is 0.3
        let color3 =
            d3.interpolateRainbow(0.3);
  
        // Values of t is 0.5
        let color4 =
            d3.interpolateRainbow(0.5);
  
        // Values of t is 0.8
        let color5 =
            d3.interpolateRainbow(0.8);
  
        // Selecting Div using query selector
        let box1 = document.querySelector(".box1");
        let box2 = document.querySelector(".box2");
        let box3 = document.querySelector(".box3");
        let box4 = document.querySelector(".box4");
        let box5 = document.querySelector(".box5");
  
        // Setting style and BG color of 
        // the particular DIVs
        box1.style.backgroundColor = color1;
        box2.style.backgroundColor = color2;
        box3.style.backgroundColor = color3;
        box4.style.backgroundColor = color4;
        box5.style.backgroundColor = color5; 
    

  

输出：