Question

这个模块提供了用来表示序列、发散以及分类的颜色方案，它的设计是用来和 d3-scale 的 d3.scaleOrdinal 和 d3.scaleSequential 结合使用。大多数的颜色方案都来自于 Cynthia A. Brewer 的 ColorBrewer。由于 ColorBrewer 只发布了离散的配色方案, 顺序和发散的颜色是通过 uniform B-splines 插值得到的。

例如，要使用 Accent 颜色方案创建分类颜色比例尺：

var accent = d3.scaleOrdinal(d3.schemeAccent);

使用 Blues 颜色方案创建 9 色刻度尺：

var blues = d3.scaleOrdinal(d3.schemeBlues[9]);

使用 PiYG 颜色方案撞见发散的、连续的颜色比例尺：

var piyg = d3.scaleSequential(d3.interpolatePiYG);

Installing

使用 NPM 安装： npm install d3-scale-chromatic. 此外还可以下载 latest release 或直接从 d3js.org 以 standalone library 的方式引入. 支持 AMD, CommonJS, 和基本的标签使用方式，如果使用标签引用，则会暴露全局 d3 变量：

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

var yellow = d3.interpolateYlGn(0), // "rgb(255, 255, 229)"
    yellowGreen = d3.interpolateYlGn(0.5), // "rgb(120, 197, 120)"
    green = d3.interpolateYlGn(1); // "rgb(0, 69, 41)"

</script>

或者作为 D3 default bundle 的一部分:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var yellow = d3.interpolateYlGn(0), // "rgb(255, 255, 229)"
    yellowGreen = d3.interpolateYlGn(0.5), // "rgb(120, 197, 120)"
    green = d3.interpolateYlGn(1); // "rgb(0, 69, 41)"

</script>

在浏览器中测试 d3-scale-chromatic.

API Reference

Categorical

d3.schemeCategory10 <>

十个分类颜色的数组，表示为 RGB 十六进制字符串。

Diverging

发散的颜色方案可以用作连续型插值器（通常与d3.scaleSequential一起使用）和离散方案（通常与 d3.scaleOrdinal 一起使用）。每一个离散方案，比如 Sequential (Single Hue)

顺序，单色调的颜色方案适合作为连续型插值（通常与 d3.scaleSequential结合使用）和离散方案 (通常与 d3.scaleOrdinal 结合使用)。每一个离散方案，比如 Sequential (Multi-Hue)

顺序，多色调的颜色方案适合作为连续型插值（通常与 d3.scaleSequential结合使用）和离散方案 (通常与 d3.scaleOrdinal 结合使用)。每一个离散方案，比如 Cyclical

d3.interpolateRainbow(t) <>

根据给定的位于 [0, 1] 之间的值 t，返回插值范围在 [0.0, 0.5] 的 d3.interpolateWarm 和 插值范围在 [0.5, 1.0] 的 d3.interpolateCool 组成的颜色方案插值后的颜色值。

d3.interpolateSinebow(t) <>

根据给定的位于 [0, 1] 之间的值 t，返回由 Jim Bumgardner 和 Charlie Loyd 组成的 “sinebow” 颜色方案对应的颜色值。