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