D3.js | d3.hsl()函数

D3.js 中的d3.hsl()函数用于构造新的 HSL 颜色，并返回作为函数参数的指定颜色的 HSL 属性。
句法：

d3.hsl(h, s, l, opacity)

或者

d3.hsl(color)

参数：这个函数接受一些上面提到的和下面描述的参数：

• h：用于设置色相值。
• s：用于设置饱和度值。
• l：用于设置亮度值。
• opacity：用于设置不透明度/透明度。
• 颜色：用于设置颜色名称或十六进制代码。

返回值：该函数返回作为函数参数的指定CSS颜色的HSL属性。
下面的程序说明了 D3.js 中的d3.hsl()函数：
示例 1：

javascript

 
 
    
        D3.js | d3.hsl() Function
    
 
    
    

 

    
         
        // Calling the d3.hsl() function
        // with some parameters
        var color1 = d3.hsl("red");
        var color2 = d3.hsl("green");
        var color3 = d3.hsl("blue");
     
        // Getting the HSL properties
        console.log(color1);
        console.log(color2);
        console.log(color3);
    

 

输出：

{"h":0, "s":1, "l":0.5, "opacity":1}
{"h":120, "s":1, "l":0.25098039215686274, "opacity":1}
{"h":240, "s":1, "l":0.5, "opacity":1}

示例 2：

javascript

 
 
    
        D3.js | d3.hsl() Function
    
 
    
    

 

    
         
        // Calling the d3.hsl() function
        // without any parameters
        var color = d3.hsl();
     
        // Getting the HSL values
        console.log(color);
    

 

输出：

{"h":null, "s":null, "l":null, "opacity":1}

参考： https://devdocs.io/d3~5/d3-color#hsl