【d3.js-02】scale比例尺

定义

1. 比例尺：将某一区域的值映射到另一区域，其大小关系不变
2. 在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。

1.线性比例尺

1. 定义域和值域都为连续区间
2. d3.scale.linear()：返回一个线性比例尺continuous
3. continuous.invert(value)：获取反转值,对于范围内的值y, continuous(continuous.invert(y)) 约等于y

let dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
let min = d3.min(dataset);
let max = d3.max(dataset);

let linear = d3.scaleLinear()  
        .domain([min, max])
        .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

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

console.log(x.invert(80))  // 20
console.log(x(20))     //80

2.序数比例尺

2.1 d3.scaleOrdinal()

1. 定义域和值域都为离散数据

let scale = d3.scaleOrdinal().domain(['jack', 'rose', 'john']).range([10, 20, 30])

scale('jack') // 输出:10
scale('rose') // 输出:20
scale('john') // 输出:30

2. 定义域和值域数据量不一致时，按照顺序循环依次对应

2.2 d3.scaleBand()

1. 定义域domain为离散数组，但值域range为一个连续域
2. d3.scaleBand() 只针对domain中的数据集映射对应的值，即当输入值不在domain中时，输出undefined

let scale = d3.scaleBand().domain([1,2,3,4]).range([0,100])

scale(1) // 输出:0
scale(2) // 输出:25
scale(4) // 输出:75
scale(0)  // 输出:undefined
scale(10) // 输出:undefined

3.量化比例尺

1. d3.scaleQuantize() 定义域是连续的，值域为离散的
2. 在domian()域外的情况：两侧延展

let scale = d3.scaleQuantize().domain([0, 10]).range(['small', 'medium', 'long'])

scale(1)   // 输出:small
scale(5.5) // 输出:medium
scale(8)   // 输出:long  
scale(-10) // 输出：small
scale(10)  // 输出：long

4.时间比例尺

1. d3.scaleTime() 定义域为时间轴，值域为连续区间

let scale = d3.scaleTime()
              .domain([new Date(2017, 0, 1, 0), new Date(2017, 0, 1, 2)])
              .range([0,100]);
              
scale(new Date(2017, 0, 1, 0)) // 输出:0
scale(new Date(2017, 0, 1, 1)) // 输出:50   

5.颜色比例尺

1. d3.schemeCategory10

d3.schemeCategory10  //10种分类颜色
d3.schemeCategory20  //20种分类颜色
d3.schemeCategory20b
d3.schemeCategory20c

// 定义一个序数颜色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)