d3比例尺好比地图上的映射,偌大的世界可以缩小到一张很小的纸上,d3在作图的过程中,为了将数据映射展示到一张小小的画布上,当然也离不开比例尺了。那数据是多种多样的,有离散的,有连续的,还有按时间顺序的,所以要作图之前必须要选好合适的比例尺。
1.d3.scaleLinear()连续型比例尺---适合折线图的x轴y轴
d3.scaleLinear()创造一个连续型的线性比例尺,此比例尺对应的数据都是连续型的,.domain()是输入域,也就是对应实际的数据,.range()是输出域对应。注释也很重要哦~~
var _linescale = d3.scaleLinear()
.domain([0,100]).nice()//nice用来优化数据 四舍五入等
.range([0,300])//亦可以用rangeRound输出整数
.clamp(true);//这里为true保证输入的数据超出输入域的范围也能落在range内。
//获取输入域中某个数值对应的输出域结果
console.log(_linescale(40));//结果为120
console.log(_linescale(120));//结果为300,如果clamp(false)结果为360。
//获取输出域中对应的某个输入域的值
console.log(_linescale.invert(200));//结果为66.66666666666666
console.log(_linescale.ticks(5));//结果[0, 20, 40, 60, 80, 100]
//.tickFormat设置格式如百分比等
clamp(true)保证输入的数据超出输入域的范围也能落在range内;
clamp(false)超出domain的部分,也会超出range()。
2. d3.scaleBand() 序数比例尺---适合柱图x轴
d3.scaleBand() 创建一个序数比例尺,其中.domain()是离散型的数组,比如[1,2,3,4],而range()要是一个连续域。
var _bandscale = d3.scaleBand()
.padding(0.2)//20%包括内外边距及段间距paaddingInner只包括段间距
.domain(['0~50','50~100','100~200','200~500','500~1000','>1000'])
.range([0,700]);
console.log(_bandscale('0~50'));//19.354838709677438
console.log(_bandscale('100~200'));//212.90322580645162
console.log(_bandscale('100'));//undefined
console.log(_bandscale.bandwidth());//77.41935483870968
console.log(_bandscale.step());//步长包括bandWidth以及padding 96.77419354838709
与上面的连续型比例尺不一样的是这里输入域不能超出domain的范围,超出就会输出undefined。
3. d3.scaleOrdinal() 序数比例尺---适合散点图的x轴
var _ordinalscale = d3.scaleOrdinal()
.domain(['jack', 'rose', 'john'])
.range([10, 20, 30]);
console.log(_ordinalscale('jack'));//10
console.log(_ordinalscale('rose'));//20
console.log(_ordinalscale('john'));//30
那当输入domain以外的数据时,也能输出正确的值:
console.log(_ordinalscale('a'));//10
console.log(_ordinalscale('adjjs'));//20
4. d3.scaleQuantize() 量化比例尺 ---适合给连续型的数据分等级
domain()是连续型的,range()是离散型的。
var score = d3.scaleQuantize()
.domain([10, 100])
.range(['C', 'B', 'A']);
console.log(score(20)); // C
console.log(score(50)); // B
console.log(score(60)); // B
console.log(score(80)); // A
如果超出domain范围,依然会有对应映射输出:
console.log(score(1));//C
console.log(score(120));//A
5. d3.scaleTime() 时间比例尺
时间比例尺属于连续型比例尺的一种。只不过domain()输入域变成了时间轴。
let _datescale = d3.scaleTime()
.domain([new Date(2017, 0, 1), new Date(2017, 0, 2)])
.range([0,200])
console.log(_datescale(new Date(2017, 0, 1, 12)));//100
console.log(_datescale(new Date(2017, 0, 1, 15)));//125
console.log(_datescale(new Date(2017, 0, 1, 20)));//166.66666666666669
如果超出输入域的范围也能正常映射:
console.log(_datescale(new Date(2017, 0, 2, 20)));//366.66666666666663
6. 颜色比例尺
D3提供了一些颜色比例尺,10就是10种颜色:
hello
d3
world
scales
are
very
fine
so
funny
!
7. 其他比例尺
另外有一些函数比例尺的功能
d3.scalePow//乘方比例尺
d3.scaleSqrt//开方比例尺
d3.scaleLog//对数比例尺
d3.scaleSymlog//对称对数比例尺
d3.scaleIdentity//恒等比例尺
d3.scaleUtc//UTC 线性比例尺
详见官网其他比例尺
参考文章 D3中常用的比例尺