序數(shù)比例尺的定義域和值域都是離散的留拾。戳晌,如果需要通過(guò)輸入一些離散的值得到另一些離散的值,這時(shí)候就要考慮序數(shù)比例尺痴柔。
- d3.scale.orinal():構(gòu)建一個(gè)序數(shù)比例尺
- ordinal(x) :輸入定義域內(nèi)的一個(gè)離散值沦偎,返回值域內(nèi)一個(gè)離散值
- ordinal.domain([values]): 設(shè)定和獲取定義域
- ordinal.range([values]) :設(shè)定或獲取值域
- ordinal.rangePoint(interval,[padding]):接收一個(gè)連續(xù)的區(qū)間,然后根據(jù)定義域中離散值的數(shù)量將其分段咳蔚,分段值即為值域的離散值豪嚎。interval是區(qū)間,padding是邊界部分留下的空白。
- ordinal.rangeRoundPoints(interval,[padding]) :和ranggePoint()一樣谈火,但是會(huì)將結(jié)果取正
- ordinal.rangeBands(interval,[padding],[outerpadding]) 代替 range()設(shè)定值域侈询,接收一個(gè)連續(xù)的區(qū)間,然后根據(jù)定義域中離散值的數(shù)量將其分段糯耍,但是分段方法不同扔字。
- ordinal.rangeRoundBands():和rangeBands()一樣,但是會(huì)將結(jié)果取整谍肤。
- ordinal.rangeBand():返回使用rangeBands()設(shè)定后每一段的寬度啦租。
- ordinal.rangeExtend():返回一個(gè)數(shù)組,數(shù)組中存有值域的最大值和最小值荒揣。
var ordinal = d3.scale.ordinal()
.domain([1,2,3,4,5])
.rangePoints([0,100]);
console.log( ordinal.range() ); //輸出[0,25,50,75,100]
console.log( ordinal(1) ); //輸出0
console.log( ordinal(3) ); //輸出50
console.log( ordinal(5) ); //輸出100
//計(jì)算見(jiàn)下圖
ordinal.rangePoints([0,100],5);
console.log( ordinal.range() ); //輸出[27.77,38.88,50,61.11,72.22]
ordinal.rangeRoundPoints([0,100],5);
console.log( ordinal.range() ); //輸出[28,39,50,61,72]
var bands = d3.scale.ordinal()
.domain([1,2,3,4,5])
.rangeBands([0,100]);
//計(jì)算見(jiàn)下圖
console.log( bands.range() ); //輸出[0,20,40,60,80]
console.log( bands.rangeBand() ); //輸出20
bands.rangeBands([0,100],0.5,0.2);
console.log( bands.range() ); //輸出[4.081632653061225,24.489795918367346,44.89795918367347,65.3061224489796,85.71428571428571]
console.log( bands.rangeBand() ); //輸出10.204081632653061
step的計(jì)算
rangePoints中step的計(jì)算
rangeBands中step的計(jì)算
獲取顏色的序數(shù)比例尺
- d3.scale.category10():10種顏色
- d3.scale.category20():20種顏色
- d3.scale.category20b():20種顏色
- d3.scale.category20c():20種顏色
盧綸輸入值是什么樣的離散值篷角,該比例尺都按照顏色順序返回。
var color = d3.scale.category10();
console.log( color(1) ); //輸出顏色中的第一個(gè)
console.log( color("zhangsan") ); //輸出顏色中的第一個(gè)
.attr("fill".function(d,i){
return color(i); //color是顏色比例尺系任,i是被綁定數(shù)據(jù)的索引hao
})