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);
    })