Howard Liang edited this page Jan 25, 2016 · 3 revisions

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.