d3-scale-chromatic
此模块提供了连续,旨在与d3.scale中的d3.scaleOrdinal和d3.scaleSequential配合使用。这些方案大多来自于Cynthia A. Brewer的ColorBrewer。由于ColorBrewer仅发布了离散颜色方案,因此连续比例尺和发散比例尺使用uniform B-splines进行插值。
例如,使用Accent颜色方案创建一个分类颜色比例尺:
var accent = d3.scaleOrdinal(d3.schemeAccent);
使用Blues颜色方案创建一个连续的离散九色比例尺:
var blues = d3。scaleOrdinal(D3。schemeBlues [ 9 ]);
使用PiYG颜色方案创建一个发散的连续颜色比例尺:
var piyg = d3.scaleSequential(d3.interpolatePiYG);
Installing
如果你使用npm,请键入npm install d3-scale-chromatic
。否则,请下载最新版本。你也可以直接从d3js.org加载,作为standalone library(独立库)或D3 4.0的一部分来使用。支持AMD,CommonJS和vanilla环境。在vanilla环境下,会输出一个全局的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的默认包:
<script src="https://d3js.org/d3.v4.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>
API Reference
Categorical
d3.schemeCategory10
一个由10种以RGB十六进制字符串表示的分类颜色组成的数组。
d3.schemeAccent
一个由8种以RGB十六进制字符串表示分类颜色组成的数组。
d3.schemeDark2
一个由8种以RGB十六进制字符串表示分类颜色组成的数组。
d3.schemePaired
一个由12种以RGB十六进制字符串表示分类颜色组成的数组。
d3.schemePastel1
一个由9种以RGB十六进制字符串表示分类颜色组成的数组。
d3.schemePastel2
一个由8种以RGB十六进制字符串表示分类颜色组成的数组。
d3.schemeSet1
一个由9种以RGB十六进制字符串表示分类颜色组成的数组。
d3.schemeSet2
一个由8种以RGB十六进制字符串表示分类颜色组成的数组。
d3.schemeSet3
一个由12种以RGB十六进制字符串表示分类颜色组成的数组。
Diverging
发散颜色方案可用作连续插值器(通常与d3.scaleSequential一起使用)和离散方案(通常与d3.scaleOrdinal一起使用)。每个离散方案,如d3.schemeBrBG,都表示为一个由十六进制颜色字符串组成的数组。该数组中的第k个元素包含了大小为k的颜色方案,d3.schemeBrBG[9]包含了一个由代表棕色 - 蓝色 - 绿色发散颜色方案的9种颜色的9个字符串组成的数组。发散颜色方案支持的大小k为3到11。
d3.interpolateBrBG(t)
d3.schemeBrBG[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“BrBG”发散颜色方案中的相应颜色。
d3.interpolatePRGn(t)
d3.schemePRGn[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“PRGn”发散颜色方案中的相应颜色。
d3.interpolatePiYG(t)
d3.schemePiYG[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“PiYG”发散颜色方案中的相应颜色。
d3.interpolateRdBu(t)
d3.schemeRdBu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“PuOr”发散颜色方案中的相应颜色。
d3.interpolateRdBu(t)
d3.schemeRdBu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“RdBu”发散颜色方案中的相应颜色。
d3.interpolateRdGy(t)
d3.schemeRdGy[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“RdGy”发散颜色方案中的相应颜色。
d3.interpolateRdYlBu(t)
d3.schemeRdYlBu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“RdYlBu”发散颜色方案中的相应颜色。
d3.interpolateRdYlGn(t)
d3.schemeRdYlGn[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“RdYlGn”发散颜色方案中的相应颜色。
d3.interpolateSpectral(t)
d3.schemeSpectral[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“Spectral”发散颜色方案中的相应颜色。
Sequential (Single Hue)
连续的单色颜色方案可用作连续插值器(通常与d3.scaleSequential一起使用)和离散方案(通常和d3.scaleOrdinal一起使用)。每个离散方案,如d3.schemeBlues,都表示为一个由十六进制颜色字符串组成的数组。该数组中的第k个元素包含了大小为k的颜色方案,d3.schemeBlues[9]
包含了一个由代表蓝色连续颜色方案的9种颜色的9个字符串组成的数组。连续的单一颜色方案支持的大小k为3到9。
d3.interpolateBlues(t)
d3.schemeBlues[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“Blues”连续颜色方案中的相应颜色。
d3.interpolateGreens(t)
d3.schemeGreens[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“Greens”连续颜色方案中的相应颜色。
d3.interpolateGreys(t)
d3.schemeGreys[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“Greys”连续颜色方案中的相应颜色。
d3.interpolateOranges(t)
d3.schemeOranges[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“Oranges”连续颜色方案中的相应颜色。
d3.interpolatePurples(t)
d3.schemePurples[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“Purples”连续颜色方案中的相应颜色。
d3.interpolateReds(t)
d3.schemeReds[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“Reds”连续颜色方案中的相应颜色。
Sequential (Multi-Hue)
连续的多色颜色方案可用作连续插值器(通常与d3.scaleSequential一起使用)和离散方案(通常和d3.scaleOrdinal一起使用)。每个离散方案,如d3.schemeBuGn,都表示为一个由十六进制颜色字符串组成的数组。该数组中的第k个元素包含了大小为k的颜色方案,d3.schemeBuGn[9]
包含了一个由代表蓝色 - 绿色连续颜色方案的9种颜色的9个字符串组成的数组。连续的多色颜色方案支持的大小k为3到9。
d3.interpolateViridis(t)
给定[0,1]范围内的数字t,返回表示为RGB字符串的“viridis”连续颜色方案中的相应颜色,该感知均匀的颜色方案由van der Walt, Smith 和 Firing为matplotlib设计。
d3.interpolateInferno(t)
给定[0,1]范围内的数字t,返回表示为RGB字符串的“inferno”连续颜色方案中的相应颜色,该感知均匀的颜色方案由van der Walt 和 Smith为matplotlib设计。
d3.interpolateMagma(t)
给定[0,1]范围内的数字t,返回表示为RGB字符串的“magma”连续颜色方案中的相应颜色,该感知均匀的颜色方案由van der Walt 和 Smith为matplotlib设计。
d3.interpolatePlasma(t)
给定[0,1]范围内的数字t,返回表示为RGB字符串的“plasma”连续颜色方案中的相应颜色,该感知均匀的颜色方案由van der Walt 和 Smith为matplotlib设计。
d3.interpolateWarm(t)
给定[0,1]范围内的数字t,返回表示为RGB字符串的Niccoli’s perceptual rainbow旋转180°后的相应颜色。
d3.interpolateCool(t)
给定[0,1]范围内的数字t,返回表示为RGB字符串的Niccoli’s perceptual rainbow中的相应颜色。
d3.interpolateCubehelixDefault(t)
给定[0,1]范围内的数字t,返回表示为RGB字符串的Green’s default Cubehelix中的相应颜色。
d3.interpolateBuGn(t)
d3.schemeBuGn[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“BuGn”连续颜色方案中的相应颜色。
d3.interpolateBuPu(t)
d3.schemeBuPu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“BuPu”连续颜色方案中的相应颜色。
d3.interpolateGnBu(t)
d3.schemeGnBu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“GnBu”连续颜色方案中的相应颜色。
d3.interpolateOrRd(t)
d3.schemeOrRd[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“OrRd”连续颜色方案中的相应颜色。
d3.interpolatePuBuGn(t)
d3.schemePuBuGn[k][k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“PuBuGn”连续颜色方案中的相应颜色。
d3.interpolatePuBu(t)
d3.schemePuBu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“PuBu”连续颜色方案中的相应颜色。
d3.interpolatePuRd(t)
d3.schemePuRd[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“PuRd”连续颜色方案中的相应颜色。
d3.interpolateRdPu(t)
d3.schemeRdPu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“RdPu”连续颜色方案中的相应颜色。
d3.interpolateYlGnBu(t)
d3.schemeYlGnBu[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“YlGnBu”连续颜色方案中的相应颜色。
d3.interpolateYlGn(t)
d3.schemeYlGn[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“YlGn”连续颜色方案中的相应颜色。
d3.interpolateYlOrBr(t)
d3.schemeYlOrBr[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“YlOrBr”连续颜色方案中的相应颜色。
d3.interpolateYlOrRd(t)
d3.schemeYlOrRd[k]
给定[0,1]范围内的数字t,返回表示为RGB字符串的“YlOrRd”连续颜色方案中的相应颜色。
Cyclical
d3.interpolateRainbow(t)
给定[0,1]范围内的数字t,返回d3.interpolateWarm比例为[0.0, 0.5]中相应的颜色伴随着d3.interpolateCool比例为[0.5, 1.0]中相应的颜色,从而实现周期性less-angry rainbow颜色方案。