D3中为我们提供了比例尺模块。简单地说,比例尺就相当于是一个函数,让我们把一组定义域映射到值域。下面我就来介绍一下D3中几个比较常用的比例尺。
1.d3.scaleLinear() 线性比例尺
scaleLinear会将一组线性的定义域映射到一组线性的值域当中。每个值域中的值y可以表示为定义域中的值x的函数:y = mx + b。使用d3.scaleLinear()创造一个线性比例尺,利用domain()设置定义域,range()函数定义值域。
用法:
let scale = d3.scaleLinear()
.domain([0,10]) //设置1-5的线性定义域
.range([0,100])//设置0-100的线性值域
scale(0) //0
scale(2) //20
映射关系:
2.d3.scaleBand() 序数比例尺
scaleBand会将一组离散的定义域映射到一组线性的定义域中,根据定义域中的值将值域分割为几个均匀的分段,并返回分段中的第一个值。
用法:
let scale = d3.scaleBand()
.domain([1,2,3,4])
.range([0,100])
scale(1) //0
scale(2) //25
映射关系:
3.d3.scaleQuantize()量化比例尺
scaleQuantize会将一组连续的定义域映射到一组离散的值域中,根据值域中的值数,将连续的定义域域划分为几个均匀的分段。每个值域的值y可以表示为定义域的值x的量化线性函数:y = m round(x) + b。
用法:
let color = d3.scaleQuantize()
.domain([0, 1])
.range(["brown", "steelblue"]);
color(0.49); // "brown"
color(0.51); // "steelblue"
映射关系: