颜色 - intelligaia/d3 GitHub Wiki

WikiAPI--中文手册核心函数颜色

实现可视化要经常和颜色打交道。虽然你的电脑显示屏懂得很多的颜色,但这对通过js来配置颜色帮助不大。所以d3提供多种颜色空间的表示,包括 RGBHSLLABHCL,可实现规范、插值、转换和操作(例如颜色的明暗)。

注意:虽然你可以直接操作颜色,当时也需要参考一下D3对于interpolateRgb, interpolateHslscales等内置颜色插值的实现。如果你想查阅调色盘,请查阅 ordinal scales

RGB

# d3.rgb(r, g, b)

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

# d3.rgb(color)

通过解析输入的字符串参数(r, gb),创建一个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, gb 访问到。可支持的列表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, sl 属性值来获取颜色的相应属性.

# 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, sl访问到。可支持的列表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"。

HCL

# d3.hcl(h, c, l)

???

# d3.hcl(color)

???

# hcl.brighter([k])

???

# hcl.darker([k])

???

# hcl.rgb()

???

# hcl.toString()

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

L*a*b*

# d3.lab(l, a, b)

???

# d3.lab(color)

???

# lab.brighter([k])

???

# lab.darker([k])

???

# lab.rgb()

???

# lab.toString()

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

Color

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

# d3.color()

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

# color.rgb()

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

# color.toString()

转换为代表这个颜色的RGB十六进制字符串,例如 "#f7eaba"。

边城译2014-4-6 咕噜校20141122

⚠️ **GitHub.com Fallback** ⚠️