D3.js scale比例尺介绍

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

映射关系:


scaleLinear.png

2.d3.scaleBand() 序数比例尺

scaleBand会将一组离散的定义域映射到一组线性的定义域中,根据定义域中的值将值域分割为几个均匀的分段,并返回分段中的第一个值。
用法:

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

scale(1) //0
scale(2) //25

映射关系:


scaleBand.png

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"

映射关系:


scaleQuantize.png

你可能感兴趣的:(D3.js scale比例尺介绍)