一、介绍
1.概念
我们知道地图有比例尺,作为地图缩放时的标尺。
同样的D3也比例尺。
D3绘制表是需要依赖数据的,有时候数据可能太大或太小,太小的数据如果按照实际绘制导致看不见,太大的数据按照事迹绘制将会超出画布的范围。因此比例尺在D3绘制中是非常重要的。
在D3种有两种比例尺:
2.线性比例尺
- 线性比例尺:能将一个连续的区间,映射到另一区间。要解决柱形图宽度的问题,就需要线性比例尺。
例如:
现有一组数据:
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
有如下要求:将 dataset 中最小的值,映射成 0;将最大的值,映射成 300。
代码如下:将 dataset 中最小的值,映射成 0;将最大的值,映射成 300。
代码如下:
var min = d3.min(dataset);
var max = d3.max(dataset);
var linear = d3.scaleLinear()
.domain([min, max])
.range([0, 300]);
linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300
**注意:**这里有两个函数,其中domain()是指定义域,range()是指值域。需要注意他们的写法。
3.序数比例尺
- 序数比例尺:有时候,定义域和值域不一定是连续的。要让他们一一映射则需要序数比例尺。
例如:
有两个数组:
var index = [0, 1, 2, 3, 4];
var color = ["red&#