D3.js interpolateGreens()函数

d3.js 中的d3.interpolateGreens()函数用于返回与“Greens”的顺序配色方案对应的颜色。此函数用于返回不同深浅的绿色。

句法：

d3.interpolateGreens(t);

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

• t：它是 0 到 1 范围内的任意数字。

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

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

示例 1：

 
 
 
 
 
Document 
 
 
 


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

输出：

示例 2：

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

   
   
  
  
  
  
  
  
   
    // creating different colors for different
    // Values of t as 0.1, 0.2...
    let color1= 
    d3.interpolateGreens(0.1); 
    let color2= 
    d3.interpolateGreens(0.2); 
      let color3= 
    d3.interpolateGreens(0.3); 
      let color4= 
    d3.interpolateGreens(0.4); 
      let color5= 
    d3.interpolateGreens(0.5);
   
    // 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; 
   
 

输出：