前言:
比例尺在绘制表图中尤为重要,数据驱动视图的关键就在于比例尺是否使用恰当。
序数比例尺(ordinal)
var dataset = [1,2,3,4,5];
var width = 400 ;
var padding = 0.2;
//d3.range(number)接收一个数字生成一个数组[0,1,...number]
var ordinal = d3.scale.ordinal()
.domain(d3.range(dataset.length))
//生成对应的序数比例
//会以0~width的长度计算出对应上面序数输入域的序数输出域
.rangeRoundBands([0,width],padding);
console.log(ordinal.range());//[18, 94, 170, 246, 322];
//获取间隔(step)值包含padding
console.log(ordinal.rangeBand());
//坐标轴调用比例尺时会获取到padding值,每个坐标会是step+padding/2
//然后给柱形图的x定义ordinal.range(i)的时候就刚好坐标轴错开了半个padding 然后给柱形的宽度设置为ordinal.rangeBand() 就刚好在坐标轴中间了
d3.svg.axis().scale(ordinal).orient("bottom");
