d3提供了多種顏色配套方案，包含離散、連續(xù)可選方案，可為我們的可視化提供配套的顏色。

當(dāng)然，要是自己有精力的話，可以選擇自己的配色方案。

分類配色方案

使用方法

let fill=this.$d3.scaleOrdinal(this.$d3.schemeCategory10)fill(t)//t? 0-9 范圍為顏色的數(shù)量

d3.schemeCategory10

d3.schemeAccent?

?d3.schemeDark2

?d3.schemePaired

?d3.schemePastel1

?

d3.schemePastel2

?

?d3.schemeSet1

?d3.schemeSet2

?d3.schemeSet3

?d3.schemeTableau10

d3.schemeCategory20配色方案已被廢除，使用后會(huì)報(bào)錯(cuò)。

發(fā)散色配色方案

可以作為連續(xù)插值器(通常與d3.scaleSequential一起使用)，也可以作為離散方案(通常與d3.scaleOrdinal一起使用)。

每個(gè)發(fā)散色的離散方案（例如d3.schemeBrBG）是一個(gè)顏色字符串的二維數(shù)組。該數(shù)組的第k個(gè)元素包含大小為k的配色方案。d3.schemeBrBG[9]是包含9個(gè)顏色字符串的數(shù)組，包含從棕色-藍(lán)色-綠色的9個(gè)顏色。

d3.interpolateBrBG(t)? //范圍為0-1

d3.schemeBrBG[k]? //范圍為3-9

??更多發(fā)散色配色方案請(qǐng)參考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 范圍為顏色的數(shù)量

連續(xù)的:

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

總結(jié)

以上是生活随笔為你收集整理的D3 配色方案篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。