D3.js interpolateLab()函数

D3.js 中的interpolateLab()函数用于返回两个给定颜色之间的 CIELAB 颜色空间插值器。作为参数给出的颜色不需要采用 CIELAB 格式。稍后可以给出简单的颜色名称，它们由内置函数d3.lab() 转换为 CIELAB 格式。

句法：

d3.interpolateLab(a, b);

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

• a：它是数据类型字符串的颜色名称。
• b：数据类型字符串的颜色名称。

返回：它返回插值函数。

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

示例 1：在控制台中打印颜色。

  
  
  Document




  
  
  
  
    // Printing the return type of the function
    console.log("Type of the function is: ",
 typeof(d3.interpolateLab("green", "yellow")))
    console.log("A RGB string: ", 
d3.interpolateLab("green", "yellow")(0.435))
    console.log("A RGB string",
 d3.interpolateLab("green", "white")(0.888996))
  

输出：

示例 2：在 HTML 中使用函数。

  
  
  Document


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


  D3.interpolateLab()
  
    
    
    
    
  
  
  
  
  
    let b1=document.querySelector(".box1");
    let b2=document.querySelector(".box2");
    let color=d3.interpolateLab("green", "yellow")(0.435);
    let color2=d3.interpolateLab("green", "white")(0.888996); 
    b1.style.backgroundColor=color;
    b2.style.backgroundColor=color2;
  

输出：