D3 比例尺小记

线性比例尺 d3.scaleLinear

最常用的比例尺 : d3.scaleLinear , 线性比例尺：

var fn = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

fn(20); // 80
fn(50); // 320

这里的 scaleLinear 方法创建了一个函数。 将[10, 130] 的空间 投射到 [0, 960] 的一个函数：

[ 10 , 130 ] => [ 0 , 960 ] ，用数学的写法就是：

$$
f(x) = y , x \in [10 , 130] , y \in [0 , 960]
$$

比例尺的作用就是创建一个映射函数，在实际写代码的过程中，是很有作用的。除了线性比例尺外，d3 内置了十几种比例尺，可以满足各种不场景的需求。

处理字符串和复合数据

d3的比例尺不只是可以处理数字计算，它还能处理颜色值以及复合数据！！

处理颜色

var color = d3.scaleLinear()
    .domain([100,500])
    .range(['red','#666666'])
color(200) //rgb(217, 26, 26)
color(400) //rgb(140, 77, 77)

var color = d3.scaleLinear()
    .domain([-100, 0, +100])
    .range(["red", "white", "green"]);
color(-50); // rgb(255, 128, 128)
color(0); // rgb(255, 255, 255)
color(50); // rgb(128, 192, 128)

处理复合数据

//处理复合数据
var style = d3.scaleLinear()
    .domain([60,3000])
    .range([{width:'20px',opacity:'0.5'},{width:'200px',opacity:'0.8'}]);
style(80); // {width: "21.224489795918366px", opacity: "0.5020408163265306"}
color(1000); // {width: "77.55102040816327px", opacity: "0.5959183673469388"}
color(3000); // {width: "200px", opacity: "0.8"}

内部方法

看到这里，有没有觉得 D3 的比例尺很强大呢？

强大的还不止于此，一般来说，比例尺对象还有更多功能，拿 scaleLinear 来说，除了本身就是一个方法外，以自身的数据为参数，还可以调用子方法。 比如上面例子里面的 domain 和 range 实际上都是比例尺对象自身的方法。

每种比例尺根据功能的不同，提供的方法也不同，纯性比例尺提供的功能：

1. 通过 domain range 设置取值范围、目标空间范围
2. 可以通过 invert 方法来通过值反向取到参数
3. 可以通过 clamp 方法设置不要溢出
4. 可以通过 interpolate 方法自定义插值器
5. 如果需要生成坐标轴，可以使用 ticks tickFormat 来自定义刻度

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

// invert 方法，根据结果值反向取回变量值
x(20);			//80
x.invert(80); // 20
x(50);			//320
x.invert(320); // 50

// 默认超过 domain 的范围，值会参照规律去计算
x(-10); // -160
x.invert(-160); // -10

// 使用 clamp 方法，超过范围后，返回边界的值
x.clamp(true);
x(-10); // 0  [10,130]=>[0,960] 小于  10 的都会映射到0
x.invert(-160); // 10 [0,960]=>[10,130] 小于  0 的都会映射到 10


// 插值器
var color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"]);
color(0); //rgb(176, 32, 27)
color(10);	//rgb(165, 42, 42)
color.interpolate(d3.interpolateCubehelix.gamma(3));
color(0); //rgb(157, 51, 15)
color(10); //rgb(165, 42, 42)

其它比例尺

由于我比较懒，d3 还有很多其它的比例尺，不想一一介绍，但是所有的比例尺概念都是比较相近的，可以通过 API 去详细去看每种比例尺的详细说明：

比较常用的，是我个人的心得，其它的在不同场景下有更大的常用性。

附录：比例尺大全：

比例尺	说明
scaleLinear	线性比例尺, 最常用的
scaleIdentity	[0,1] 区间的线性恒等比例尺，感觉没什么用
scalePow	指数比例尺
scaleLog	对数比例尺
scaleSqrt	开根比例尺
scaleTime	线性时间比例尺
scaleUtc	线性日期比例尺 比较常用
scaleOrdinal	序数比例尺 ： 和线性的很像，像取值范围是可数的，不是无限的 比较常用
scaleImplicit	一种特殊的 scaleOrdinal 比例尺，感觉没什么用
scaleBand	常用来生成坐标轴位置，使用它可省去计算 padding 的烦恼、可自动计算每个条目的范围，很好用
scalePoint	一种特殊的 scaleBand， 比较少用
scaleQuantile	百分位数比例尺，用于科学分析的图形
scaleQuantize	集合区间比例尺，也很常用
scaleThreshold	阈值比例尺，一般来说 range 比 domain 多一个，根据取值的范围确定取哪 一个 range 值
schemeCategory10	10种颜色的序数比例尺
schemeCategory20	20种颜色的序数比例尺
schemeCategory20b	20种颜色的序数比例尺
schemeCategory20c	20种颜色的序数比例尺