前言:
比例尺在繪制表圖中尤為重要,數(shù)據(jù)驅動視圖的關鍵就在于比例尺是否使用恰當。
序數(shù)比例尺(ordinal)
var dataset = [1,2,3,4,5];
var width = 400 ;
var padding = 0.2;
//d3.range(number)接收一個數(shù)字生成一個數(shù)組[0,1,...number]
var ordinal = d3.scale.ordinal()
.domain(d3.range(dataset.length))
//生成對應的序數(shù)比例
//會以0~width的長度計算出對應上面序數(shù)輸入域的序數(shù)輸出域
.rangeRoundBands([0,width],padding);
console.log(ordinal.range());//[18, 94, 170, 246, 322];
//獲取間隔(step)值包含padding
console.log(ordinal.rangeBand());
//坐標軸調(diào)用比例尺時會獲取到padding值,每個坐標會是step+padding/2
//然后給柱形圖的x定義ordinal.range(i)的時候就剛好坐標軸錯開了半個padding 然后給柱形的寬度設置為ordinal.rangeBand() 就剛好在坐標軸中間了
d3.svg.axis().scale(ordinal).orient("bottom");
