D3.js - 颜色 API

D3.js - 颜色 API (d3-color)

颜色是数据可视化中至关重要的一环。D3 的 d3-color 模块提供了强大的工具，用于解析、转换和操作颜色。它支持多种颜色空间，如 RGB、HSL、Lab、HCL 和 Cubehelix。

颜色在 CSS 中可以通过多种方式指定：按名称（例如，“steelblue”）、作为 RGB 值（例如，rgb(70, 130, 180)）、十六进制值（例如，#4682b4）、HSL 值（例如，`hsl(207, 44%, 49%)）等。D3 可以解析大多数 CSS 颜色规范。

配置颜色 API

d3-color 模块是 D3.js 主库的一部分。如果单独使用模块，您可以安装 d3-color。

<!-- 选项 1：包含完整的 D3 库 -->
<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- 选项 2：包含独立的 d3-color 模块 -->
<!-- <script src="https://d3js.org/d3-color.v3.min.js"></script> -->

<script>
  // 示例用法：
  // const myColor = d3.color("tomato");
  // console.log(myColor.rgb().toString()); // "rgb(255, 99, 71)"
</script>

核心颜色操作

d3.color(specifier) 函数是解析颜色字符串的主要方式。它返回一个颜色对象，该对象具有用于转换和操作颜色的方法。

const c = d3.color("steelblue"); // 解析 "steelblue"

// 获取 RGB 分量
console.log(`R: ${c.r}, G: ${c.g}, B: ${c.b}`); // R: 70, G: 130, B: 180

// 获取不透明度
console.log(`不透明度: ${c.opacity}`); // Opacity: 1

// 转换为 HSL
const hslColor = c.hsl();
console.log(`H: ${hslColor.h}, S: ${hslColor.s}, L: ${hslColor.l}`);

// 操作颜色（返回一个新的颜色对象）
const brighterColor = c.brighter(1.5);
console.log(`更亮: ${brighterColor.formatHex()}`); // Brighter: #6ba5d8 (example)

const darkerColor = c.darker(0.7);
console.log(`更暗: ${darkerColor.formatHex()}`); // Darker: #325a7f (example)

// 改变不透明度
c.opacity = 0.5;
console.log(`淡化: ${c.toString()}`); // Faded: rgba(70, 130, 180, 0.5)

颜色 API 方法

与 d3-color 相关的主要方法：

d3.color(specifier) − 解析 CSS 颜色 specifier（例如，名称、十六进制、rgb()、hsl()），并返回一个颜色对象（通常是 d3.rgb 或 d3.hsl 的实例）。如果 specifier 无效，则返回 null。
color.r, color.g, color.b − 对于 RGB 颜色对象，这些属性保存红色、绿色和蓝色通道的值 (0-255)。
color.h, color.s, color.l − 对于 HSL、HCL 或 Cubehelix 颜色对象，这些属性分别表示色相、饱和度和明度/亮度。取值范围因颜色空间而异。
color.opacity − 不透明度值，范围从 0（完全透明）到 1（完全不透明）。
color.rgb() − 返回颜色的 RGB 表示。所有颜色对象都有此方法。
color.hsl() − 返回颜色的 HSL 表示。
color.lab() − 返回 Lab 颜色空间的表示。
color.hcl() − 返回 HCL (LChuv) 颜色空间的表示。
color.cubehelix() − 返回 Cubehelix 颜色空间的表示。
color.brighter([k]) − 返回一个新的、更亮的颜色。k（默认为 1）是增亮因子。
color.darker([k]) − 返回一个新的、更暗的颜色。k（默认为 1）是减暗因子。
color.displayable() − 如果颜色可显示（即 RGB 通道值在 [0, 255] 范围内且不透明度在 [0, 1] 范围内），则返回 true。
color.formatHex() − 返回 RGB 十六进制字符串（例如，“#RRGGBB”）。
color.formatHsl() − 返回 HSL 字符串表示（例如，“hsl(H,S%,L%)”）。
color.formatRgb() − 返回 RGB 字符串表示（例如，“rgb(R,G,B)”）。
color.toString() − 等同于 formatRgb() 或 formatHsl()，具体取决于颜色对象的类型。当不透明度小于 1 时，通常返回 rgba() 或 hsla() 字符串。
d3.rgb(r, g, b[, opacity]) 或 d3.rgb(specifier) − 构造一个新的 RGB 颜色。也可以解析 specifier。
d3.hsl(h, s, l[, opacity]) 或 d3.hsl(specifier) − 构造一个新的 HSL 颜色。
d3.lab(l, a, b[, opacity]) 或 d3.lab(specifier) − 构造一个新的 Lab 颜色。
d3.hcl(h, c, l[, opacity]) 或 d3.hcl(specifier) − 构造一个新的 HCL 颜色。
d3.cubehelix(h, s, l[, opacity]) 或 d3.cubehelix(specifier) − 构造一个新的 Cubehelix 颜色。

使用不同的颜色空间

不同的颜色空间具有不同的感知特性。HSL 对于色相旋转很直观。Lab 和 HCL 设计为感知均匀，这意味着颜色值的变化对应于感知的相似颜色变化。这对于为数据创建颜色比例尺非常有用。

const baseColor = d3.hcl("purple");
console.log("基础 HCL:", baseColor.toString());

// 在 HCL 中修改亮度（通常更适合感知亮度变化）
const lighterHCL = d3.hcl(baseColor.h, baseColor.c, baseColor.l + 20, baseColor.opacity);
console.log("更亮的 HCL:", lighterHCL.rgb().toString()); // 转换回 RGB 以显示

const saturatedHCL = d3.hcl(baseColor.h, baseColor.c + 30, baseColor.l, baseColor.opacity);
console.log("饱和度更高的 HCL:", saturatedHCL.rgb().toString());

示例：颜色操作日志

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3 Color API Examples</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <h3>请查看浏览器控制台输出的 D3 Color API 结果。</h3>
  <script>
    console.log("---< D3 颜色示例 ---");

    const color1 = d3.color("coral");
    console.log('原始 (珊瑚红):', color1.toString(), color1);
    console.log('可显示吗?', color1.displayable());
    console.log('十六进制格式:', color1.formatHex());

    const color2 = d3.rgb(50, 150, 200, 0.8);
    console.log('\nRGB 颜色:', color2.toString(), color2);
    console.log('更亮版本:', color2.brighter(2).toString());

    const color3 = d3.hsl("green");
    console.log('\nHSL 颜色 (绿色):', color3.toString(), color3);
    color3.h += 60; // 偏移色相
    color3.s -= 0.2; // 降低饱和度
    console.log('修改后的 HSL:', color3.toString());

    const labColor = d3.lab("navy");
    console.log('\nLab 颜色 (藏青色):', labColor.toString(), labColor);
    // Lab 值：l (亮度), a (绿-红轴), b (蓝-黄轴)
    console.log(`Lab 值：l=${labColor.l.toFixed(2)}, a=${labColor.a.toFixed(2)}, b=${labColor.b.toFixed(2)}`);

    const cubehelixColor = d3.cubehelix(300, 0.5, 0.5); // Cubehelix 的 h, s, l
    console.log('\nCubehelix 颜色:', cubehelixColor.toString(), cubehelixColor);
  </script>
</body>
</html>

实际应用

d3-color 模块用于：

为图表元素定义静态颜色。
以编程方式调整颜色（例如，用于悬停效果、高亮显示）。
通过颜色插值创建颜色比例尺（通常与 d3-interpolate 和 d3-scale 结合使用）。
在不同颜色空间之间转换颜色，以实现特定的视觉效果或感知均匀性。

对于创建整个颜色方案（例如，类别型、顺序型、发散型），D3 提供了 d3-scale-chromatic 模块，该模块提供了多种预定义且经过感知测试的调色板。这些调色板通常使用通过 d3-color 原理定义和操作的颜色。

欲了解更多详细信息，请访问 d3-color 文档。