D3.js | d3.color()函数

简介

d3.color()函数用于创建颜色对象。它接收一个表示颜色的字符串作为参数，并返回一个颜色对象。

语法

d3.color(colorString);

• colorString: 表示颜色的字符串，支持以下格式：
  • CSS3颜色名称（例如："red"、"green"、"blue"等）；
  • 16进制RGB值（例如："#FF0000"、"#00FF00"、"#0000FF"等）；
  • 16进制RGBA值（例如："#FF0000FF"、"#00FF00FF"、"#0000FFFF"等）；
  • RGB值（例如："rgb(255, 0, 0)"、"rgb(0, 255, 0)"、"rgb(0, 0, 255)"等）；
  • RGBA值（例如："rgba(255, 0, 0, 1)"、"rgba(0, 255, 0, 1)"、"rgba(0, 0, 255, 1)"等）；
  • HSL值（例如："hsl(0, 100%, 50%)"、"hsl(120, 100%, 50%)"、"hsl(240, 100%, 50%)"等）；
  • HSLA值（例如："hsla(0, 100%, 50%, 1)"、"hsla(120, 100%, 50%, 1)"、"hsla(240, 100%, 50%, 1)"等）。

返回值

d3.color()函数返回一个表示颜色的对象，对象包含以下属性：

• r: 表示颜色的红色分量（取值范围为0~255）；
• g: 表示颜色的绿色分量（取值范围为0~255）；
• b: 表示颜色的蓝色分量（取值范围为0~255）；
• opacity: 表示颜色的不透明度（取值范围为0~1）；
• toString(): 返回一个表示颜色的字符串；

示例

// 创建颜色对象
var red = d3.color("red");

// 输出颜色对象的属性值
console.log(red.r);        // 255
console.log(red.g);        // 0
console.log(red.b);        // 0
console.log(red.opacity);  // 1
console.log(red.toString());// "#ff0000"

// 修改颜色对象的属性值
red.opacity = 0.5;
console.log(red.toString());// "rgba(255, 0, 0, 0.5)"

注意事项

• d3.color()函数返回的颜色对象不是标准的CSS颜色表示方式，因此在设置样式时需要使用"fill"或"stroke"属性，并将颜色对象作为属性值传递给这些属性；
• d3.rgb()函数、d3.hsl()函数和d3.lab()函数可以分别用于创建RGB、HSL和LAB颜色对象，并分别返回表示这些颜色的对象。