颜色

优质
小牛编辑
131浏览
2023-12-01

实现可视化要经常和颜色打交道。虽然你的电脑显示屏懂得很多的颜色,但这对通过js来配置颜色帮助不大。所以d3提供多种颜色空间的表示,包括 RGB, HSL,LAB 和 HCL,可实现规范、插值、转换和操作(例如颜色的明暗)。 注意:虽然你可以直接操作颜色,当时也需要参考一下D3对于interpolateRgb, interpolateHsl 和 scales等内置颜色插值的实现。 如果你想查阅调色盘,请查阅ordinal scales 。

RGB

d3.rgb(r, g, b)

通过输入的参数r, g 和 b,创建一个RGB类型颜色对象。参数必须是在0-255之间的整数。你可以通过访问返回的颜色对象的r, g 和 b属性值来获取参数r, g, b的值。

d3.rgb(color)

• rgb decimal - "rgb(255,255,255)" • hsl decimal - "hsl(120,50%,20%)" • rgb hexadecimal - "#ffeeaa" • rgb shorthand hexadecimal - "#fea" • named - "red", "white", "blue"

通过解析输入的字符串参数,创建一个RGB类型颜色对象。如果参数 color 不是一个字符串,参数就会被强制类型转换为字符串类型。因此,该构造函数可以用来创建一个已经存在的颜色对象的副本,或者是将d3.hsl强制类型转换为RGB。字符串参数可以有多种形式: • rgb十进制- "rgb(255,255,255)" • hsl十进制- "hsl(120,50%,20%)" • rgb十六进制- "#ffeeaa" • rgb简写十六进制- "#fea" • 名称 - "red", "white", "blue" 输出的颜色将以红、绿和蓝的整数通道形式存储(整数范围:[0,255])。颜色通道可以通过颜色对象的属性 r, g 和 b 访问到。可支持的列表named colors可以通过CSS指定。如果是HSL空间的颜色,可以转换成在RGB空间相同类型的值,和 hsl.rgb类似。

rgb.brighter([k])

返回颜色的一个高亮副本。每个颜色通道值将乘以0.7 ^ -k. 如果参数 k 被忽略,将使用默认值1。通道值上限值255,下限值30.

rgb.darker([k])

返回低颜色的一个亮度副本。每个颜色通道值将乘以0.7 ^ k. 如果参数 k 被忽略,将使用默认值1。

rgb.hsl()

返回一个HSL空间的等值颜色对象。请查阅 d3.hsl 了解更多关于返回颜色对象的信息. 文档 CSS3 Color Module Level 3中有关于RGB到HSL转换的信息。该函数是上述转化的逆操作。

rgb.toString()

将RGB颜色转换成一个十六进制数的字符串,如 such as "#f7eaba"。

HSL

d3.hsl(h, s, l)

通过输入的参数h, s和l,创建一个HSL颜色对象。创建新的HSL颜色,通过指定的色度h,饱和度s和亮度l。其中色度h取值范围[0,360]。饱和度和亮度取值范围 0,1。你可以通过访问返回的颜色对象的h, s 和l 属性值来获取颜色的通道属性.

d3.hsl(color)

• rgb decimal - "rgb(255,255,255)" • hsl decimal - "hsl(120,50%,20%)" • rgb hexadecimal - "#ffeeaa" • rgb shorthand hexadecimal - "#fea" • named - "red", "white", "blue"

通过解析输入的字符串参数,创建一个HSL类型颜色对象。如果参数 color 不是一个字符串,参数就会被强制类型转换为字符串类型。因此,该构造函数可以用来创建一个已经存在的颜色对象的副本,或者是将d3.rgb强制类型转换为HSL。字符串参数可以有多种形式: • rgb十进制- "rgb(255,255,255)" • hsl十进制- "hsl(120,50%,20%)" • rgb十六进制- "#ffeeaa" • rgb简写十六进制- "#fea" • 名称 - "red", "white", "blue" 输出的颜色将以取值范围为[0,360]的色度和取值范围为[0,1]的亮度、饱和度作为属性值存储。红、绿和蓝的整数通道形式存储(整数范围:[0,255])。颜色通道可以通过颜色对象的属性h, s和l访问到。可支持的列表named colors可以通过CSS指定。如果是RGB空间的颜色,可以转换成在HSL空间相同类型的值,和rgb.hsl类似。

hsl.brighter([k])

返回颜色的一个高亮副本。每个颜色通道值将乘以0.7 ^ -k. 如果参数 k 被忽略,将使用默认值1。通道值上限值255,下限值30.

hsl.darker([k])

返回低颜色的一个亮度副本。每个颜色通道值将乘以0.7 ^ k. 如果参数 k 被忽略,将使用默认值1。

hsl.rgb()

返回一个RGB空间的等值颜色对象。请查阅d3.rgb了解更多关于返回颜色对象的信息. 文档CSS3 Color Module Level 3中有关于HSL到RGB 转换的信息。该函数是上述转化的逆操作。

hsl.toString()

将颜色转换成一个十六进制数的RGB颜色字符串,如 such as "#f7eaba"。

HCL

d3.hcl(h, c, l)

d3.hcl(color)

hcl.brighter([k])

hcl.darker([k])

hcl.rgb()

hcl.toString()

将颜色转换成一个十六进制数的RGB颜色字符串,如 such as "#f7eaba"。 Lab*

d3.lab(l, a, b)

d3.lab(color)

lab.brighter([k])

lab.darker([k])

lab.rgb()

lab.toString()

将这个Lab*颜色转换成一个十六进制数的RGB颜色字符串,如 such as "#f7eaba"。

Color

提供d3.color的基础类型,支持你扩展D3增加行的颜色空间。这个类型能够自动地使用 d3.interpolate(通过instanceof d3.color识别)插入RGB。

d3.color()

颜色类型的基础构造函数。

color.rgb()

返回这个颜色的RGB值,必须被所有的颜色空间实现。

color.toString()

转换为代表这个颜色的RGB十六进制字符串,例如"#f7eaba"。 边城译2014-4-6 咕噜校20141122