D3.js interpolateHclLong()函数

D3.js 中的d3.interpolateHclLong()函数用于返回两种颜色之间的 CIELCh _ab颜色空间插值器函数。它与 interpolateHcl()函数几乎相同，但两者之间的唯一区别是它不使用色调之间的最短路径。

句法：

d3.interpolateHclLong(a, b);

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

• a:是彩字符串。
• b：是彩字符串。它与第一种颜色的混合量由 interpolateHclLong(0<=x<=1) 决定

注意：如果 x=1，则 b 的一部分和 a 的 0 部分返回颜色。更改 x 的值并查看不同深浅的颜色。

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

示例 1：

  
  
  Document




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

输出：

示例 2：

  
  
  Document


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


  D3.interpolateHclLong()
  
    
    
    
    
  
  
  
  
  
    let box1=document.querySelector(".box1");
    let box2=document.querySelector(".box2");
    let color=d3.interpolateHclLong("green", "white")(0.5);
    let color2=d3.interpolateHclLong("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;
  

输出：