【D3.js 学习总结】6、D3比例尺-CSDN博客

概念

比例尺是一组把输入域映射为输出范围的函数，它将真实值跟实际显示值做了一个映射，
在之前的例子中，我们已经用到了线性比例尺；

var _x = d3.scale.linear().domain([0,10]).range([0,100])

它的意思是将0-10之间的输入域以线性的方式映射到0-100的输出范围上，也就是说传入的值为10，显示的时候显示为100；

_x(0); // 返回0
_x(5); // 返回50
_x(10); // 返回100

常用方法

_x.nice()

告诉比例尺取得为range() 设置的任何值域，把两端的值扩展到最接近的数，比如，值域[0.20147987687960267, 0.996679553296417]的扩展值域为[0.2, 1]，这个方法对正常人都有用，因为人不是计算机，看到0.20147987687960267 这样的数你一定会头大。

_x.rangeRound()

用rangeRound() 代替range() 后，则比例尺输出的所有值都会舍入到最接近的整数值，对输出值取整有利于图形对应精确的像素值，避免边缘出现模糊不清的锯齿。

_x.clamp()

默认情况下，线性比例尺可以返回指定范围之外的值。例如，假如给定的值位于输入值域之外，那么比例尺也会返回一个位于输出范围之外的值。不过，在比例尺上调用clamp(true) 后，就可以强制所有输出值都位于指定的范围内。这意味着超出范围的值，会被取整到范围的最低值或最高值（总之是最接近的那个值）。

其它比例尺：

d3.scale.linear - 线性比例尺

将输入域值按线性等比的方式分隔作为输出范围

示例：d3.scale.linear().domain([0,100]).range([0,700])
应用场景：按比例、成直线的展现或者规则、光滑的运动

d3.scale.identity - 线性恒等比例尺

线性恒等比例尺是线性比例尺的特殊类型，实现输入域与输出范围 1:1 的缩放，其方法都是恒等函数

示例：d3.scale.identity().domain([0,100])
应用场景：在处理像素坐标时有用，输入值是多少像素，在输出显示时也是多少像素

d3.scale.quantize - 量化比例尺

量化比例尺是线性比例尺的变体，输入的域是连续的，使用离散的range，输入数据被分割成不同的片段，也即是分类，如10个人按设定的年龄分类。

示例：d3.scale.quantize().domain([0,10]).range([0,10,20,30,40,50,60,70]);
应用场景：想把数据分类的情形（！还没想到最适合的业务场景）

var quantize = d3.scale.quantize().domain([0,10]).range([0,10,20,30,40,50,60,70]);
quantize(0) ==> 0
quantize(1) ==> 0
quantize(2) ==> 10
quantize(3) ==> 20
quantize(4) ==> 30
quantize(5) ==> 40
quantize(6) ==> 40
quantize(7) ==> 50
quantize(8) ==> 60
quantize(9) ==> 70
quantize(10) ==> 70

d3.scale.quantile - 分位数比例尺

分位数比例尺是线性比例尺的变体，无论输入数据怎么分布，都会被映射成离散值

示例：d3.scale.quantile().domain([0,10,20,30,40,50,60,70]).range([0,100,200,300,400,500,700]);
应用场景：已经对数据分类的情形（！似懂非懂，需要继续研究）

d3.scale.log - 对数比例尺

对数比例尺与线性比例尺相似，区别是对数比例尺首先对输入数据进行对数变换。

示例：d3.scale.log().domain([1,100]).range([0,700]).base(2);
应用场景：输入值以对数级变化的数据集（！不太熟悉对数，需要继续研究）

d3.scale.pow - 指数比例尺

指数比例尺与线性比例尺相似，区别是pow比例尺首先对输入数据进行指数变换，默认指数为1，所以默认情况下也是数值 1:1 的缩放。

示例：d3.scale.pow().domain([0,100]).range([0,700]).exponent(2);
应用场景：输入值以指数级变化的数据集

d3.scale.sqrt - 平方根比例尺

平方根比例尺是pow比例尺的特殊类型，相当于 d3.scale.pow().exponent(0.5)

示例：d3.scale.sqrt().domain([0,100]).range([0,700])
应用场景：输入值以平方根变化的数据集

d3.scale.threshold - 临界值比例尺

临界值比例尺与量化比例尺类似，不过允许将任意的子集映射到离散的range。

示例：d3.scale.threshold().domain([0,1,2,3,4,5,6,7]).range([0,0,100,200,300,400,500,600,700]);
应用场景：暂不清楚（！还没完全明白，需要继续研究）

d3.scale.ordinal - 序数比例尺

使用非定量值（如类名）作为输出的序数比例尺

示例：d3.scale.ordinal().domain(["A", "B", "C", "D", "E", "F", "G", "H"]) .range([0,100,200,300,400,500,600,700]);
应用场景：输入值与转出值需要一一对应的场景

d3.scale.category10()

构造一个新的颜色序数比例尺，使用10种类型的颜色：

#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf

d3.scale.category20()

构造一个新的颜色序数比例尺，使用20种类型的颜色：

#1f77b4 #aec7e8 #ff7f0e #ffbb78 #2ca02c #98df8a #d62728 #ff9896 #9467bd #c5b0d5 #8c564b #c49c94 #e377c2 #f7b6d2 #7f7f7f #c7c7c7 #bcbd22 #dbdb8d #17becf #9edae5

d3.scale.category20b()

构造一个新的颜色序数比例尺，使用20种类型的颜色：

#393b79 #5254a3 #6b6ecf #9c9ede #637939 #8ca252 #b5cf6b #cedb9c #8c6d31 #bd9e39 #e7ba52 #e7cb94 #843c39 #ad494a #d6616b #e7969c #7b4173 #a55194 #ce6dbd #de9ed6

d3.scale.category20c()

构造一个新的颜色序数比例尺，使用20种类型的颜色：

#3182bd #6baed6 #9ecae1 #c6dbef #e6550d #fd8d3c #fdae6b #fdd0a2 #31a354 #74c476 #a1d99b #c7e9c0 #756bb1 #9e9ac8 #bcbddc #dadaeb #636363 #969696 #bdbdbd #d9d9d9