histogram布局用法

1histogram布局

histogram布局，频率分布直方图，字面意思很明了，表明了一个范围内分布的频率，其中每个柱型表明了这个范围内个数。

//随机生成正态分布数据
var random=d3.random.normal(170,10);//均值和方差

var dataset=[]
for (var i=0;i<100;i++){
    dataset.push(random());
}
console.log(dataset);
//定义histgram布局
var histogram=d3.layout.histogram()
                        .range([30,200])
                        .bins(20)
                        .frequency(true);
var histdata=histogram(dataset);

用布局对象包裹数据，会生成我们想要的数据其实所有的布局都是用来包裹数据，生成特定所需要的数据，然后我们从这些数据中抽取我们所需要的数据，用路径，或者rect，circle等基本图形

控制台可以看出，三个字段，x，y，dx

2.生成x，y轴

//我们抽取x来生成x轴的输入域
//map是array的一个方法循环histdata中的d.x，返回一个新的d.x数组
var ticks=histdata.map(function(d){return d.x});

var xscale=d3.scale.ordinal()
                  .domain(ticks)
                  .rangeRoundBands([padding,width-padding],0.1);
console.log(ticks)
var xaxis=d3.svg.axis()
            .scale(xscale)
            .orient("buttom")
            .tickFormat(d3.format(".0f"));

svg.append("g")
    .attr("class","axis")
    .attr("transform","translate("+0+","+(height-padding)+")")
    .call(xaxis);


/*y轴*/  
//d3找最小值，最大值方法
var min=d3.min(histdata,function(d){return d.y});
var max=d3.max(histdata,function(d){return d.y});

var yscale=d3.scale.linear()
                    .domain([min,max])
                    .range([height-padding,padding]);

var yaxis=d3.svg.axis()
                .scale(yscale)
                .orient("left")
                .tickFormat(d3.format(".0f"));

svg.append("g")
    .attr("class","axis")
    .attr("transform","translate("+padding+",0)")
    .call(yaxis);

我们抽出来的tick数据

3.画出柱状图

/*将g从右上角移动*/
var rects=svg.append("g")
    .attr("transform","translate(0,-40)")//-40的意思是从svg的下边移动

rects.selectAll("rect")
    .data(histdata)
    .enter()
    .append("rect")
    .attr("class","rects")
    .attr("x",function(d,i){
        return xscale(d.x);
    })
    .attr("y",function(d,i){
        return yscale(d.y);
    })
    .attr("width",function(d,i){
        return xscale.rangeBand();
    })
    .attr("height",function(d,i){
        return height-yscale(d.y);
    })