d3-color

尽管你的浏览器对于颜色知之甚多，但这并没有对通过JavaScript操纵颜色有太大帮助。因此d3-color模块提供了各种色彩空间的表示，允许规范、转换和操作颜色。（另请参阅d3-interpolate）

以“steelblue”这种颜色为例：

var c = d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1}

试着将它转换为HSL格式：

var c = d3.hsl("steelblue"); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1}

现在将hue（色相）旋转90°，放大saturation（饱和度），并转化为CSS可用的字符串格式：

c.h += 90;
c.s += 0.2;
c + ""; // rgb(198, 45, 205)

把颜色调淡一点：

c.opacity = 0.8;
c + ""; // rgba(198, 45, 205, 0.8)

除了机器喜爱的RGB和HSL两种色彩空间外，d3-color还支持两种专门为人类设计的色彩空间：

Cubehelix的特点是单调、明亮，而Lab和HCL在视觉上更加均匀。注意，HCL是Lab的柱状形式，就像HSL是RGB的柱状形式一样。

Installing

如果你使用npm，请键入npm install d3-color。否则，请下载最新版本。你也可以直接从d3js.org加载，作为standalone library（独立库）或D3 4.0的一部分来使用。支持AMD，CommonJS和vanilla环境。在vanilla环境下，会输出一个全局的d3：

<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script>

var steelblue = d3.rgb("steelblue");

</script>

API Refrence

d3.color(specifier)

解析给定的符合CSS Color Module Level 3的specifier字符串，返回一种RGB或HSL颜色。如果specifier无效，则返回null。例如：

  • rgb(255, 255, 255)
  • rgb(10%, 20%, 30%)
  • rgba(255, 255, 255, 0.4)
  • rgba(10%, 20%, 30%, 0.4)
  • hsl(120, 50%, 20%)
  • hsla(120, 50%, 20%, 0.4)
  • #ffeeaa
  • #fea
  • steelblue

受支持的named colors（具名颜色）由CSS指定。

注意：此方法也可以和instanceof一起使用，用以检测一个对象是否是一种颜色的实例。对于颜色子类也是如此，你可以检测一种颜色是否在特定的色彩空间中。

color.opacity

该颜色的不透明度，通常在[0,1]之间。

color.rgb()

返回该颜色的RGB等效值。对于RGB颜色，则为this。

color.brighter([k])

返回该颜色的一个稍亮的副本。如果指定了k，它将控制返回的颜色应该亮多少。如果不指定k，则默认为1。这种方法的效果依赖于色彩空间的实现方式。

color.darker([k])

返回该颜色的一个稍暗的副本。如果指定了k，它将控制返回的颜色应该暗多少。如果不指定k，则默认为1。这种方法的效果依赖于色彩空间的实现方式。

color.displayable()

当且仅当该颜色能够在标准硬件上显示时才返回true。例如，如果一种RGB颜色的任何一个通道值小于0或者大于255，又或者其不透明度不在[0,1]之间，都将返回false。

color.toString()

根据CSS Object Model specification返回该颜色的字符串形式，如rgb(247, 234, 186)。如果该颜色无法显示，将返回一个合适的可显示颜色。例如，当RGB通道值大于255时将被限制至255。

d3.rgb(r, g, b[, opacity])

d3.rgb(specifier)

d3.rgb(color)

创建一个新的RGB颜色。返回实例的通道值为r，g，b。可以使用RGB color picker（RGB颜色拾取器）来查看此色彩空间。

如果指定了r、g和b，则它们表示返回的颜色的通道值；也可以指定opacity。如果指定了符合CSS Color Module Level 3的specifier，它将被解析然后转换为RGB色彩空间。另请参阅color。如果指定了一个颜色实例，将使用color.rgb将其转换为RGB色彩空间。注意：与color.rgb不同的是，此方法将始终返回一个新实例，即使color已经是RGB颜色。

d3.hsl(h, s, l[, opacity])

d3.hsl(specifier)

d3.hsl(color)

创建一个新的HSL颜色。返回实例的通道值为h，s，l。可以使用HSL color picker（HSL颜色拾取器）来查看此色彩空间。

如果指定了h、s和l，则它们表示返回的颜色的通道值；也可以指定opacity。如果指定了符合CSS Color Module Level 3的specifier，它将被解析然后转换为HSL色彩空间。另请参阅color。如果指定了一个颜色实例，将使用color.rgb先将其转换为RGB颜色，然后再转换为HSL颜色。（已经是HSL色彩空间的颜色会跳过转换为RGB颜色这一步）

d3.lab(l, a, b[, opacity])

d3.lab(specifier)

d3.lab(color)

创建一个新的Lab颜色。返回实例的通道值为l，a，b。可以使用Lab color picker（Lab颜色拾取器）来查看此色彩空间。

如果指定了l、a和b，则它们表示返回的颜色的通道值；也可以指定opacity。如果指定了符合CSS Color Module Level 3的specifier，它将被解析然后转换为Lab色彩空间。另请参阅color。如果指定了一个颜色实例，将使用color.rgb先将其转换为RGB颜色，然后再转换为Lab颜色。（已经是Lab色彩空间的颜色会跳过转换为RGB颜色这一步，而HCL色彩空间的颜色会直接转换为Lab）

d3.hcl(h, c, l[, opacity])

d3.hcl(specifier)

d3.hcl(color)

创建一个新的HCL颜色。返回实例的通道值为h，c，l。可以使用HCL color picker（HCL颜色拾取器）来查看此color space（色彩空间）。

如果指定了h、c和l，则表示返回的颜色的通道值；也可以指定opacity。如果指定了符合CSS Color Module Level 3的specifier，它将被解析然后转换为HCL色彩空间。另请参阅color。如果指定了一个颜色实例，将使用color.rgb先将其转换为RGB颜色，然后再转换为HCL颜色。（已经是HCL色彩空间的颜色会跳过转换为RGB颜色这一步，而Lab色彩空间的颜色会直接转换为HCL）

d3.cubehelix(h, s, l[, opacity])

d3.cubehelix(specifier)

d3.cubehelix(color)

创建一个新的Cubehelix颜色。返回实例的通道值为h，s，l。可以使用Cubehelix color picker（Cubehelix颜色拾取器）来查看此色彩空间。

如果指定了h、c和l，则表示返回的颜色的通道值；也可以指定opacity。如果指定了符合CSS Color Module Level 3的specifier，它将被解析然后转换为Cubehelix色彩空间。另请参阅color。如果指定了一个颜色实例，将使用color.rgb先将其转换为RGB颜色，然后再转换为Cubehelix颜色。（已经是Cubehelix色彩空间的颜色会跳过转换为RGB颜色这一步）

results matching ""

    No results matching ""