文章目录
  1. 1. 线性比例尺 d3.scaleLinear
    1. 1.1. 处理字符串和复合数据
    2. 1.2. 内部方法
  2. 2. 其它比例尺

线性比例尺 d3.scaleLinear

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

1
2
3
4
5
6
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的比例尺不只是可以处理数字计算,它还能处理颜色值以及复合数据!!

处理颜色

1
2
3
4
5
6
7
8
9
10
11
12
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)

处理复合数据

1
2
3
4
5
6
7
//处理复合数据
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 来说,除了本身就是一个方法外,以自身的数据为参数,还可以调用子方法。 比如上面例子里面的 domainrange 实际上都是比例尺对象自身的方法。

每种比例尺可能根据功能的不同,提供的方法也不同,纯性比例尺提供的功能:

  1. 通过 domain range 设置取值范围、目标空间范围
  2. 可以通过 invert 方法来通过值反向取到参数
  3. 可以通过 clamp 方法设置不要溢出
  4. 可以通过 interpolate 方法自定义插值器
  5. 如果需要生成坐标轴,可以使用 ticks tickFormat 来自定义刻度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 阈值比例尺,一般来说 rangedomain 多一个,根据取值的范围确定取哪 一个 range
schemeCategory10 10种颜色的序数比例尺
schemeCategory20 20种颜色的序数比例尺
schemeCategory20b 20种颜色的序数比例尺
schemeCategory20c 20种颜色的序数比例尺
文章目录
  1. 1. 线性比例尺 d3.scaleLinear
    1. 1.1. 处理字符串和复合数据
    2. 1.2. 内部方法
  2. 2. 其它比例尺