D3 配色方案篇

d3提供了多种颜色配套方案，包含离散、连续可选方案，可为我们的可视化提供配套的颜色。

当然，要是自己有精力的话，可以选择自己的配色方案。

分类配色方案

使用方法

let fill=this.$d3.scaleOrdinal(this.$d3.schemeCategory10)

fill(t)//t  0-9  范围为颜色的数量

d3.schemeCategory10

d3.schemeAccent 

 d3.schemeDark2

 d3.schemePaired

 d3.schemePastel1

 

d3.schemePastel2

 

 d3.schemeSet1

 d3.schemeSet2

 d3.schemeSet3

 d3.schemeTableau10

d3.schemeCategory20配色方案已被废除，使用后会报错。

发散色配色方案

可以作为连续插值器(通常与d3.scaleSequential一起使用)，也可以作为离散方案(通常与d3.scaleOrdinal一起使用)。

每个发散色的离散方案（例如d3.schemeBrBG）是一个颜色字符串的二维数组。该数组的第k个元素包含大小为k的配色方案。d3.schemeBrBG[9]是包含9个颜色字符串的数组，包含从棕色-蓝色-绿色的9个颜色。

d3.interpolateBrBG(t)  //范围为0-1

d3.schemeBrBG[k]  //范围为3-9

  更多发散色配色方案请参考d3-scale-chromatic/README.md at v3.0.0 · d3/d3-scale-chromatic · GitHub

使用方法

离散的:

let fill=d3.scaleOrdinal(d3.schemeBrBG[9])

fill(t)//t  0-8  范围为颜色的数量

连续的:

//方案一
d3.interpolateBrBG(t) //t  0-1

//方案二
let fill=d3.scaleSequential()
  .domain([0, 100])
  .interpolator(d3.interpolateBrBG);
 
fill(50);