快捷導(dǎo)航

D3.js入門之比例尺的使用與繪制

更新時(shí)間：2022年11月08日 09:49:14 作者：FinGet

中國這么大，要在一張小小地圖上畫上中國，那么就需要按一定的比例縮小。D3 可視化畫圖，也是如此。本文就來和大家聊聊D3中的比例尺的繪制與使用，感興趣的可以學(xué)習(xí)一下

中國這么大，要在一張小小地圖上畫上中國，那么就需要按一定的比例縮小。D3 可視化畫圖，也是如此，例如：一個(gè)柱狀圖的最大值為10000，但是畫布最大高度只有400，那么10000就只能被映射為400，那么8000、5000...又該映射成哪個(gè)值呢？

比例尺

D3中的比例尺大概有20多種(d3.scaleLinear、d3.scalePow、d3.scaleTime、d3.scaleBand等)。大體上可以分為三類：

連續(xù)輸入和連續(xù)輸出
連續(xù)輸入和離散輸出
離散輸入和離散輸出

常用比例尺

scaleLinear 線性比例尺

const scale = d3.scaleLinear() // 連續(xù)輸入和連續(xù)輸出
.domain([0, 500]) // 輸入域 0 ~ 500
.range([0, 300]); // 輸出域 0 ~ 300

console.log(scale(100)) // 60
console.log(scale(300)) // 180
console.log(scale(500)) // 300

scaleBand 有序序數(shù)比例尺

scaleBand：有助于創(chuàng)建條形圖，同時(shí)考慮每個(gè)條形之間的間隔。域被指定為一組值（每個(gè)波段一個(gè)值），范圍為波段的最小和最大范圍（例如條形圖的總寬度）。

實(shí)際上scaleBand會(huì)將范圍拆分為n 個(gè)帶區(qū)（其中n是域數(shù)組中的值的數(shù)量），并考慮在指定間隔的情況下計(jì)算條形圖的位置和寬度。

const scale = d3.scaleBand()
  .domain([1,2,3,4])
  .range([0,100])

console.log(scale(1)) // 0
console.log(scale(3)) // 50
console.log(scale(4)) // 75

console.log(scale.bandwidth()) // 25 (100 分為4份，每份25(柱狀圖寬度))

d3.scaleTime() 時(shí)間比例尺

d3.scaleTime()類似于d3.scaleLinear()線性比例尺，只不過輸入域變成了一個(gè)時(shí)間軸。

const scale = d3.scaleTime()
  .domain([new Date(2022, 0, 1), new Date(2022, 0, 31)])
  .range([0, 30])

console.log(scale3(new Date(2022, 0, 15))) // 14

scaleOrdinal 無序序數(shù)比例尺

const scale = d3.scaleOrdinal() // 離散輸入和離散輸出
  .domain(['jack', 'rose', 'john', 'lucy'])
  .range([10, 20, 30])
console.log(scale("jack")); // 10
console.log(scale("lucy")); // 10
console.log(scale("rose")); // 20
console.log(scale("john")); // 30

console.log(scale("finget")) // 20 輸入域以外的值

const scale = d3.scaleOrdinal()
  .domain(['jack', 'rose', 'john', 'lucy'])
  .range([10, 20, 30])
  .unknown(23) // 指定未知輸入域的輸出值
console.log(scale("finget"))  // 23

如果輸入域大于輸出域，domain()的值按照順序循環(huán)依次對(duì)應(yīng)range()的值

scalePoint 點(diǎn)比例尺

// 創(chuàng)建從一組離散值映射到指定范圍內(nèi)等距的點(diǎn)
const scale = d3.scalePoint() // 離散輸入和離散輸出
  .domain(['jack', 'rose', 'john']) 
  .range([0, 100])
console.log(scale4('jack')) // 0
console.log(scale4('rose')) // 50
console.log(scale4('john')) // 100

console.log(scale4.step()) // 訪問點(diǎn)之間的距離 50

scaleThreshold 閾值比例尺

// scaleThreshold 將連續(xù)數(shù)值輸入映射到范圍定義的離散值
let scaleThreshold = d3.scaleThreshold() // 連續(xù)輸入和離散輸出
  .domain([0, 10, 20])
  .range(['small', 'medium', 'large', 'xlarge'])
console.log(scaleThreshold(5)) // medium
console.log(scaleThreshold(15)) // large
console.log(scaleThreshold(25)) // xlarge
console.log(scaleThreshold(35)) // xlarge
console.log(scaleThreshold(45)) // xxlarge

如果指定了 domain 則將比例尺的輸入范圍設(shè)置為指定的數(shù)組。數(shù)組必須是升序排序的。值通常是數(shù)值，也可以是能進(jìn)行排序的其他類型。如果輸出域的值個(gè)數(shù)為 N + 1, 則輸入域中值的個(gè)數(shù)必須為 N. 如果比 N 少則對(duì)應(yīng)的輸出域中多余的值會(huì)被忽略。如果多于 N 則會(huì)出現(xiàn)返回 undefined 的情況。如果沒指定 domain 則返回比例尺當(dāng)前的輸入域。

// invertExtent 返回輸出域中的值 value 對(duì)應(yīng)的輸入范圍
console.log(scaleThreshold.invertExtent('small')) // [Infinity, 0]
console.log(scaleThreshold.invertExtent('medium')) // [0, 10]
console.log(scaleThreshold.invertExtent('large')) // [10, 20]
console.log(scaleThreshold.invertExtent('xlarge')) // [20, Infinity]

scaleQuantize 量化比例尺

const scale = d3.scaleQuantize() // 連續(xù)輸入和離散輸出
    .domain([0, 10])
    .range(['red', 'green', 'blue', 'pink'])

console.log(scale(-1)) // red
console.log(scale(2)) // red
console.log(scale(8)) // pink
console.log(scale(20)) // pink

console.log(scale.invertExtent('red')) // [0, 2.5]
console.log(scale.invertExtent('green')) // [2.5, 5]
console.log(scale.invertExtent('blue')) // [5, 7.5]
console.log(scale.invertExtent('pink')) // [7.5, 10]

顏色比例尺

D3提供了一些顏色比例尺：點(diǎn)擊查看文檔

d3.schemeCategory10
d3.schemeAccent
d3.schemeDark2
d3.schemePaired
d3.schemePastel1
d3.schemePastel2
d3.schemeSet1
d3.schemeSet2
d3.schemeSet3

// 定義一個(gè)序數(shù)顏色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)
console.log(color(1)) // #1f77b4

總結(jié)

本章介紹了幾種常用的比例尺，D3 還有一些比例尺可以查看官方文檔了解：

d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 類似scaleSqrt的乘方比例尺
d3.scaleLog() // 對(duì)數(shù)比例尺
d3.scaleQuantile() // 分位數(shù)比例尺

上述的各種使用比例尺的例子都相當(dāng)于一個(gè)正序的過程，從domain的數(shù)據(jù)集映射到range數(shù)據(jù)集中，那么有沒有逆序的過程呢？D3中提供了invert()以及invertExtent()方法可以實(shí)現(xiàn)這個(gè)過程。

到此這篇關(guān)于D3.js入門之比例尺的使用與繪制的文章就介紹到這了,更多相關(guān)D3.js比例尺內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: