D3.js interpolateHcl()函数

D3.js 中的interpolateHcl()函数用于返回两个颜色值之间的 CIELCh _ab颜色空间插值器函数。给出的两种颜色为字符串格式，并使用 d3.hcl()函数转换为 CIELCh _ab格式。

句法：

d3.interpolateHcl(a, b);

参数：它需要以下两个参数。

• a:是字符串。
• b:它也是一个字符串。

返回：它返回插值函数。

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

示例 1：在控制台中。

  
  
  Document




  
  
  
  
    // Printing the return type of the function
    console.log("Type of the function is: ",
 typeof(d3.interpolateHcl("green", "yellow")))
    // Using function d3.interpolateHcl()
    console.log("A RGB string: ",
 d3.interpolateHcl("green", "yellow")(0.5))
    console.log("A RGB string", 
d3.interpolateHcl("green", "white")(0.2))
  

输出：

示例 2：在 HTML 中

  
  
  Document


  .box1, .box2{
    display: flex;
    margin-right: 40px;
    border-radius: 50% 50%;
    width: 150px;
    height: 150px;
  }
  div{
    display: flex;
  }


  D3.interpolateHcl()
  
    
    
    
    
  
  
  
  
  
    let box1=document.querySelector(".box1");
    let box2=document.querySelector(".box2");
    let color=d3.interpolateHcl("green", "yellow")(0.5);
    let color2=d3.interpolateHcl("green", "white")(0.2); 
    // Changing css of the div with class-name box1
    box1.style.backgroundColor=color;
    // Changing css of the div with class-name box2
    box2.style.backgroundColor=color2;
  

输出：