其他分享
首页 > 其他分享> > d3.js -- 比例尺 scales scaleLinear scaleBand scaleOrdinal scaleTime scaleQuantize

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