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

映射关系：

image

其他：

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

映射关系：

image

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"

映射关系：

image