d3.js -- 比例尺 scales scaleLinear scaleBand scaleOrdinal scaleTime scaleQuantize

1、d3.scaleTime()时间比例尺

　　应用场景：常用于折线图时间轴刻度

　　

const myScale = d3.scaleTime()
    .domain([new Date(2017, 0, 1, 0), new Date(2017, 0, 1, 2)])
    .range([0,100]);

console.log(myScale(new Date(2017, 0, 1, 0)) ) // 0
console.log(myScale(new Date(2017, 0, 1, 1)) ) // 50

2. d3.scaleLinear() 线性比例尺

　　应用场景：数量统计图数量显示刻度

　　domain()是输入域，range()是输出域，相当于将domain中的数据集映射到range的数据集中。

 

const myScale = d3.scaleLinear().domain([1,5]).range([0,100])


console.log(myScale(1)) // 0
console.log(myScale(3)) // 50
console.log(myScale(5)) // 100

// 如果采用domain之外的数字

　console.log(myScale(-2)) // -75   console.log(myScale(7)) // 150 　// 所以domain只代表定义一个映射规则而不限于此输入域

 

3. d3.scaleBand() 序数比例尺

　　应用场景：定义域和值域是不连续的，都是离散的。例如：一些柱状统计图

 

const myScale = d3.scaleBand().domain([1,4,10]).range([0,100])

console.log(myScale(1)) // 0
console.log(myScale(3)) // undefined
console.log(myScale(4)) // 33.333333333333336
console.log(myScale(12)) // undefined

 

　　其中myScale只会输出domain数组中存在的数据，其他不存在的都返回undefined

 

4. d3.scaleOrdinal() 序数比例尺

　　应用场景：定义域和值域是不连续的，都是离散的。例如：一些柱状统计图

　　

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

　console.log(myScale('lalal')) //10   console.log(myScale('rose')) // 20   console.log(myScale('lalal')) // 10   console.log(myScale('lalal2')) // 20   console.log(myScale('lalal3')) // 30   console.log(myScale('lalal4')) // 10   console.log(myScale(0)) // 20   console.log(myScale(1)) // 30   console.log(myScale(2)) // 10   console.log(myScale(3)) // 20   console.log(myScale(4)) // 30   console.log(myScale(5)) // 10   console.log(myScale(6)) // 20   console.log(myScale(7)) // 30   console.log(myScale(8)) // 10   console.log(myScale(20)) // 20   console.log(myScale(50)) // 30   console.log(myScale(-7))   console.log(myScale(1))

 

　　为了搞清楚scaleOrdinal，分别从存在于domian数组中和不存在此数组中两种方式来解释：

　　①存在于domain数组中时：会取出range中对应的值；

　　②不存在domain数组中时：会按照顺序去循环匹配range中的值，如果是数字，会按照数字的顺序去循环匹配range中的值，如果数字不连续，也会把不连续的数字进行匹配。

 

5. d3.scaleQuantize() 量化比例尺

 

const myScale = d3.scaleQuantize().domain([1, 10]).range([10, 20, 30, 40])
    
console.log(myScale('lalal')) // 40
console.log(myScale('rose')) // 40
console.log(myScale('lalal')) // 40
console.log(myScale('lalal2')) // 40
console.log(myScale('lalal3')) // 40
console.log(myScale('lalal4')) // 40
console.log(myScale(0)) // 10
console.log(myScale(1)) // 10
console.log(myScale(2)) // 10
console.log(myScale(3)) // 10
console.log(myScale(4)) // 20
console.log(myScale(5)) // 20
console.log(myScale(6)) // 30
console.log(myScale(7)) // 30
console.log(myScale(8)) // 40
console.log(myScale(20)) // 40
console.log(myScale(50)) // 40
console.log(myScale(-7)) // 10
console.log(myScale(1)) // 10

 

　　此domain的数组会按照range的数组个数进行分配，如：

　　1,2,3 => 10

　　4,5 => 20

　　6,7  => 30

　　8,9,10 => 40

　　小于1 返回10，大于10返回40

 

标签：10,scaleQuantize,console,log,myScale,--,scales,domain,20
来源： https://www.cnblogs.com/wlgwilianm123/p/14072990.html