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颜色方案。

results matching ""

    No results matching ""