d3 直方圖 (1)

d3 直方圖 (1)

by Shang-De You

CSS

.xAxis path, .xAxis line, .yAxis path, .yAxis line{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.xAxis text, .yAxis text {
  font-family: sans-serif;
  font-size: 11px;
}

.rect {
  fill: steelblue
}

JavaScript

var rand = d3.random.normal(170, 10)

var dataSet = []

for(var i=0; i<100; i++){
	dataSet.push(rand())
}

var width = 500
var height = 380
var padding = {top:30, right:30, bottom:30, left:30}

var svg = d3.select("body").append("svg")
	.attr("width",width)
  .attr("height",height)

// -- layout --
var binNum = 8, rangeMin = 130, rangeMax = 210

var histogram = d3.layout.histogram()
	.range([rangeMin, rangeMax])
  .bins(binNum)
  .frequency(true)
  
var hisData = histogram(dataSet)

console.log(hisData)

// -- 比例尺 --  
var xAxisWidth = width - padding.left - padding.right
var yAxisWidth = height - padding.top - padding.bottom
var xTicks = hisData.map(function(d){ return d.x })

var xScale = d3.scale.ordinal()
	.domain(xTicks)
  .rangeRoundBands([0, xAxisWidth],0.1,0.3)

var yScale = d3.scale.linear()
	.domain([d3.min(hisData, function(d){ return d.y }), d3.max(hisData, function(d){ return d.y })])
  .range([5, yAxisWidth])

// -- 刻度 --  

var xAxis = d3.svg.axis()
	.scale(xScale)
  .orient("bottom")

svg.append("g")
	.attr("class", "xAxis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis)
  
// -- 直方圖 --  
var gRect = svg.append("g")
	.attr("transform", "translate(" + padding.left + "," + (-padding.bottom) + ")")
  
gRect.selectAll("rect")
	.data(hisData)
  .enter()
  .append("rect")
  .attr("class", "rect")
  .attr("x", function(d,i){
  	return xScale(d.x)
  })
  .attr("y", function(d,i){
  	return height - yScale(d.y)
  })
  .attr("width", function(d,i){
  	return xScale.rangeBand()
  })
  .attr("height", function(d){
  	return yScale(d.y)
  })