颜色 - intelligaia/d3 GitHub Wiki
- 如发现翻译不当或有其他问题可以通过以下方式联系译者:
- 邮箱:[email protected]
- QQ群:D3数据可视化205076374,大数据可视化436442115
实现可视化要经常和颜色打交道。虽然你的电脑显示屏懂得很多的颜色,但这对通过js来配置颜色帮助不大。所以d3提供多种颜色空间的表示,包括 RGB, HSL,LAB 和 HCL,可实现规范、插值、转换和操作(例如颜色的明暗)。
注意:虽然你可以直接操作颜色,当时也需要参考一下D3对于interpolateRgb, interpolateHsl 和 scales等内置颜色插值的实现。如果你想查阅调色盘,请查阅 ordinal scales 。
# d3.rgb(r, g, b)
通过输入的参数r, g 和 b,创建一个RGB类型颜色对象。参数必须是在0-255之间的整数。你可以通过访问返回的颜色对象的r, g 和 b属性值来获取参数r, g, b的值。
# d3.rgb(color)
通过解析输入的字符串参数(r, g 和 b),创建一个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颜色。其中色度h取值范围[0,360]。饱和度和亮度取值范围 [0,1] (不是百分比)。你可以通过访问返回的颜色对象的h
, s
和l
属性值来获取颜色的相应属性.
# d3.hsl(color)
通过解析输入的字符串参数color,创建一个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。
# hsl.darker([k])
返回低颜色的一个亮度副本。每个颜色通道值将乘以0.7 ^ k. 如果参数 k 被忽略,将使用默认值1。
# hsl.rgb()
返回一个RGB空间的等值颜色对象。请查阅d3.rgb了解更多关于返回颜色对象的信息. CSS3 Color Module Level 3中有关于HSL到RGB 转换的信息。
# hsl.toString()
将颜色转换成一个十六进制数的RGB颜色字符串,如 "#f7eaba"。
# d3.hcl(h, c, l)
???
# d3.hcl(color)
???
# hcl.brighter([k])
???
# hcl.darker([k])
???
# hcl.rgb()
???
# hcl.toString()
将颜色转换成一个十六进制数的RGB颜色字符串,如 "#f7eaba"。
# d3.lab(l, a, b)
???
# d3.lab(color)
???
# lab.brighter([k])
???
# lab.darker([k])
???
# lab.rgb()
???
# lab.toString()
将这个L*a*b*颜色转换成一个十六进制数的RGB颜色字符串,如 "#f7eaba"。
提供d3.color的基础类型,支持你扩展D3增加行的颜色空间。这个类型能够自动地使用 d3.interpolate(通过instanceof d3.color识别)插入RGB。
# d3.color()
颜色类型的基础构造函数。
# color.rgb()
返回这个颜色的RGB值,必须被所有的颜色空间实现。
# color.toString()
转换为代表这个颜色的RGB十六进制字符串,例如 "#f7eaba"。
边城译2014-4-6 咕噜校20141122