整理比例尺

前言:
  比例尺在绘制表图中尤为重要,数据驱动视图的关键就在于比例尺是否使用恰当。


序数比例尺(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");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容