D3.js interpolateBlues()函数

d3.js 中的d3.interpolateBlues()函数用于返回对应于“Blues”的顺序配色方案的 RGB 颜色字符串。

句法：

d3.interpolateBlues(t);

参数：此函数只接受一个参数，上面给出并描述如下：

• t：这是一个在 0 和 1 范围内的数字，包括 0 和 1。

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

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

示例 1：

 
 
 
 
 
Document 
 
 
 


   
   
  
  
  
  
  
  
   
    console.log(d3.interpolateBlues(0));
    console.log(d3.interpolateBlues(0.4));
    console.log(d3.interpolateBlues(0.2));
    console.log(d3.interpolateBlues(0.25));
    console.log(d3.interpolateBlues(0.54));
    console.log(d3.interpolateBlues(0.85));
    console.log(d3.interpolateBlues(2));
    console.log(d3.interpolateBlues(1));
   
 

输出：

示例 2：

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

   
   
  
  
  
  
  
  
   
    // creating different colors for different
    // Values of t is 0.1
    let color1= 
    d3.interpolateBlues(0.1); 
    // Values of t is 0.3
    let color2= 
    d3.interpolateBlues(0.3); 
    // Values of t is 0.5
      let color3= 
    d3.interpolateBlues(0.5); 
    // Values of t is 0.8
      let color4= 
    d3.interpolateBlues(0.8); 
    // Values of t is 1.0
      let color5= 
    d3.interpolateBlues(1.0);
   
    // 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; 
   
 

输出：