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
映射关系:
其他:
const xValue = (datum) => {return datum['日期']};
xScale = d3.scaleTime() // 时间刻度
.domain(d3.extent(data, xValue)) // 日期为刻度,需要格式化日期为: new Date(datum['日期']);
.range([0, innerWidth])
.nice();
// Adding axes
const xAxis = d3.axisBottom(xScale)
.ticks(Math.floor(alldates.length) / 4) // 表示x拥有几个刻度
//.tickFormat(d3.timeFormat('%b-%d'))
.tickSize(-innerHeight) // x轴刻度的高度
const xAxisGroup = g.append('g').call(xAxis)
.attr('transform', `translate(0, ${innerHeight})`);
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"
映射关系: