D3.js interpolateHsl()函数

D3.js 的d3.interpolatorHsl()函数用于返回两个给定颜色的 HSL 颜色空间插值函数。给出的颜色不是 HSL 格式。

句法：

d3.interpolateHsl(a, b);

参数：它需要两个参数：

• a：这是一个颜色名称，例如。红色或绿色。
• b：它也是一个颜色名称，例如。红色或绿色。

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

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

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

  
  
  Document




  
  
  
  
    console.log("Type of the function is: ",
 typeof(d3.interpolateHsl("white", "red")))
    console.log(d3.interpolateHsl("white", "red")(0.9))
    console.log(d3.interpolateHsl("white", "red")(0.4))
  

输出：

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

  
  
  Document


  div{
    width: 100px;
    height: 100px;
  }


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

输出：