梦入琼楼寒有月，行过石树冻无烟

D3 定量与线性比例尺

2022-04-21

比例尺（Scale），是在数据可视化以及专业图表中常用的一个基本元素，通过使用比例尺可以让一个数据图表更加的专业且复杂。比例尺的作用是将数据1:1对应到比例尺中，就如数据 one，对应比例尺值中的two一样。

比例尺作用


就如上述所示，我们根据的是当一个数据为100时，就用长度为100的像素进行表示，但是当数据为1000的时候，长度再使用1000表述就显得极为啦跨，且不可能一眼直观的看出差别，所以根据这种情况，我们可以合理的使用比例尺来表明数据。

定量比例尺

在数学中，共有线性函数、指数函数、对数函数，他们都有一个特征就是都是随着一个量的变化而变化，如上图中的一个线性函数y=2x+1，之后先标注x轴坐标为[0,2]，之后分别通过使用2*0+1=1，2*2+1=5来得出y轴的坐标[1,5]。那么才此时，x将会被称之为定义域，而y的范围可被称之为该值中的值域，而计算的出的结果被称之为对应法则，这三种定义域、值域、对应法则也被称之为函数的三要素。

在D3的数据可视化中那个，需要通过一个量计算出另外一个量的方法，所提供的方法被称之为比例尺，定量比例尺是值定义域是连续的情况而被称之为定量比例尺，通常 0~2之间的所有值将会被称之为“连续值”，像是1，2，3将会被称之为离散值。

线性比例尺

线性比例尺方法

线性比例尺（Linear Scale）是d3.js 中最为常用且与线性函数类似的计算相应关系的一种计算方式，主要包括如下方法 ：

ID DA FA
d3.scale.linear() 创建一个线性的比例尺
linear(x) 选择一个定义域内的值，并返回值域内对应的数据
linear.invert(y) 选择一个值域内的值，并返回定义域内所对应的数据
linear.clamp() 默认被设置为 false，即当比例尺收到了一个超过本身定义范围时依然按照同样的方法计算的出。如果被设置为true那么将会被缩小至值域范围以内。
linear.nice() 将定义域的范围修改为稍微理想的格式，如定义域为[0.40000112312,0.9999998123]这种格式，那么输出的将会是[0.4,0.9]的定义域格式。（主要用于选取坐标轴的刻度）
linear.tickFormat() 主要用于设置就有代表性的定义域中的值表示形式，可设置显示小数点的后两位以及使用百分号表示形式等（主要用于在坐标轴上）
linear.ticks() 返回一个在定义域内值中较为有代表性的数目，（默认为10），
.domain() 设定 \ 获取一个定义域 (domain)
.range() 设定 \ 获取一个值域 (range)
linear.rangeRound() 可代替 .range()进行使用，比例尺中的数据将会被进行四舍五入进行计算，且结果为整数

clamp and linear.invert or linear.invert

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var linear = d3.scale.linear()
                .domain([0,500])
                .range([0,100])
/*
                |—— linear.clamp
                |———— 当超过本身定义范围时缩小到 ”值域“ 范围内，1200结果为 @100
                |——————// console.log(linear.invert(1022))
                |———————— 通过定义域来获取所对应的值（超过了定义域内值，将会被进行压缩到定义域范围内）
                |—— linear.invert
                |———— 通过值域 10 来返回定义域内所对应的值 @50
*/
linear.clamp(true)            
console.log(linear(1022))       
/*500*/
console.log(linear(10))         
/*2*/
console.log(linear.invert(10))  
/*50*/

通过使用 clamp and linear.invert or linear.invert方法，我们可以将当超过定义域时压缩至值域范围内，也可以通过设置其值域来返回定义域所定应的值。

rangeRound vs nice

rangeRound
1
2
3
4
5
6
7
8
9
10
11
12
var linear = d3.scale.linear()
                .domain([0,500])
/*
                    |—— linear.rangeRound()
                    |————   代替传统的 .range()来完成值域的定义，通过四舍五入来进行计算，并取整数。
                    |—————— .range vs rangeRound
                    |—————————— 2.222 \ 2
                    |—— linear.nice()
                */
linear.rangeRound([0,100])  
            console.log(linear(11.11)) 
/*2*/
1
2
3
4
5
6
7

##### nice
```js
var linear = d3.scale.linear()
                    .domain([0.230000000,0.890000000]).nice()
                    .range([0,100])
                console.log(linear.domain())        /*[0.2,0.9]*/
——[0.2,0.8]
1
2
3
4
5
6
7
8
9

#### TickFormat and ticks
##### ticks
```js
var linear = d3.scale.linear()
                .domain([-200,200])
                .range([0,100])
            var ticks = linear.ticks(2);
console.log(ticks);            /* -200,0,200 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

##### TickFormat
![](https://49812933408852955071488026628034-1301075051.cos.ap-nanjing.myqcloud.com/1616092212_20210319022931867_613133931.png)
```TickForMat```与 ```ticks()```区别就是其支持自定义格式，如```+、-、%、$```等。
```js
var linear = d3.scale.linear()
                .domain([-200,200])
                .range([0,100])
            var ticks = linear.ticks(2);
console.log(ticks);

var tickFormat = linear.tickFormat(2,"+")
            for (var i=0;i < ticks.length;i++) {
	ticks[i] = tickFormat(ticks[i])
}
console.log(ticks)

基础格式与应用

在 d3.js 中，为开发者所提供了根据各种场合所适用与不同的计算方式，就比如下方的线性比例尺，在所有比例尺中都需要指定一个定义域（domain）为x轴，以及一个值域（range）为y轴来进行定义一个线性比例尺：

1
2
3
4
5
6
7
8
9
10
11
var linear = d3.scale.linear()
                .domain([0,500])
                .range([0,100])
/*
                10 @2
                15 @3
                20 @4
*/
console.log(linear(10))
            console.log(linear(15))
            console.log(linear(20))

通过上述的 code 我们们创建了一个其定义域为500、值域为100的比例尺。通过定义了线性比例尺，我呢可以通过x来计算y，就比如在上述的code中我们主要提供了10、15、20规模的数据，通过计算结果可以分别的出2，3，4规模的数据。

⬅️ Go back