D3.js interpolateSpectral()函数

d3.interpolateSpectral()函数用于从“Spectral”发散配色方案中返回颜色。此函数返回的颜色是 RGB字符串的形式。

句法：

d3.interpolateSpectral(t);

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

• t：此参数采用 0 到 1 范围内的数字。

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

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

示例 1：

 
 
 
     
     
    Geeks for geeks 
    
     
    
     
    
     
    
     
 

    h2{
        color: green;
    }
    p{
        line-height: 1px;
    }

 
    Geeks for geeks
    Different colors from interpolateSpeactral(t) are: 
     
        document.write(
"<p><b>"+d3.interpolateSpectral(0.9)+"</p></b>");  
        document.write(
"<p><b>"+d3.interpolateSpectral(0.5)+"</p></b>"); 
        document.write(
"<p><b>"+d3.interpolateSpectral(0.4)+"</p></b>"); 
        document.write(
"<p><b>"+d3.interpolateSpectral(0.3)+"</p></b>"); 
        document.write(
"<p><b>"+d3.interpolateSpectral(0.2)+"</p></b>"); 
        document.write(
"<p><b>"+d3.interpolateSpectral(0.1)+"</p></b>"); 
     
 

输出：

示例 2：

 
 
 
 
 
Document 
 
 
div{ 
  padding:6px;
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin-top: 2px;
  height: 20px; 
} 
 
 
  D3.interpolateSpectral(t) 
 
  d3.interpolateSpectral(0.5)
 
 
  d3.interpolateSpectral(0.4)

 
  d3.interpolateSpectral(0.3)

 
  d3.interpolateSpectral(0.2)

 
  d3.interpolateSpectral(0.1)


   
   
  
  
  
  
  
  
   
    // creating different colors for different value of k
    let color1= 
    d3.interpolateSpectral(0.5); 
    let color2= 
    d3.interpolateSpectral(0.4);
    let color3= 
    d3.interpolateSpectral(0.3);
    let color4= 
    d3.interpolateSpectral(0.2);
    let color5= 
    d3.interpolateSpectral(0.1);
   
    // 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;
   
 
 

输出：