D3.js interpolateSinebow()函数

d3.interpolateSinbow()函数是由Jim Bumgardner和Charlie Loyd引入的正弦波配色方案的一部分。此函数用于返回对应于 Sinebow 配色方案的 RGB 颜色字符串。

句法：

d3.interpolateSinebow(t);

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

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

返回值：上述函数返回一个 RGB字符串。

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

示例 1：

HTML

  

    
    
  
    
    
    
    
    
    
    
    
    

  

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

  

输出：

示例 2：

HTML

  

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

  

    D3.interpolateSinebow() 
  
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
  
    
        // Creating different colors for
        // different
        // Values of t is 0.4
        let color1 =
            d3.interpolateSinebow(0.4);
        // Values of t is 0.6
        let color2 =
            d3.interpolateSinebow(0.6);
        // Values of t is 0.8
        let color3 =
            d3.interpolateSinebow(0.8);
        // Values of t is 0.9
        let color4 =
            d3.interpolateSinebow(0.9);
        // Values of t is 0
        let color5 =
            d3.interpolateSinebow(0);
  
        // Selecting Div using query selector
        let pixel1 = document.querySelector(".pixel1");
        let pixel2 = document.querySelector(".pixel2");
        let pixel3 = document.querySelector(".pixel3");
        let pixel4 = document.querySelector(".pixel4");
        let pixel5 = document.querySelector(".pixel5");
  
        // Setting style and BG color of the
        // particular DIVs
        pixel1.style.backgroundColor = color1;
        pixel2.style.backgroundColor = color2;
        pixel3.style.backgroundColor = color3;
        pixel4.style.backgroundColor = color4;
        pixel5.style.backgroundColor = color5; 
    

  

输出：