d3.js[v4] 直方图布局

直方图布局

直方图布局可以用来表示数据分布，通过将离散数据点分组归纳到矩形条里绘制。

数据

//使用独立变量数为10的贝茨分布随机数生成器生成1000个0～1之间的数字
var data = d3.range(1000).map(d3.randomBates(10));

定义两个映射坐标比例尺

var x = d3.scaleLinear()
    .rangeRound([0, width]);
    

var y = d3.scaleLinear()
    .domain([0, d3.max(bins, function(d) { return d.length; })])
    .range([height, 0]);

用直方图布局转换数据

var bins = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(20))
    (data);

绑定数据绘制矩形和文本