D3.js interpolateHslLong()函数

D3.js 的d3.interpolatorHslLong()函数与 interpolateHsl()函数几乎相同，两者的唯一区别是该函数不使用两种色调之间的最短路径。

句法：

d3.interpolateHslLong(a, b);

参数：它需要两个参数：

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

返回：它返回一个插值函数。

下面给出了 d3.interpolateHslLong()函数的几个示例。

示例 1：在控制台中使用该函数。

  
  
  Document




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

输出：

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

  
  
  Document


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


  D3.interpolateHslLong()
  
    
    
    
    
  
  
  

  
    let b1=document.querySelector(".box1");
    let b2=document.querySelector(".box2");
    let color=d3.interpolateHslLong("white", "red", "green")(0.2);
    let color2=d3.interpolateHslLong("red", "green")(0.8);
    b1.style.backgroundColor=color;
    b2.style.backgroundColor=color2;
  

输出：