D3入门教程——比例尺的使用

---

一、介绍

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&#