<html>
<head>
<meta charset="utf-8">
<title>rect</title>
<script src="./d3.min.js" charset="utf-8"></script>
<script>
window.onload = function () {
/**
* 完整的柱形图
* 一个完整的柱形图包含三部分：矩形、文字、坐标轴。
*/
var width = 400
var height = 400
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
//画布周边的空白
var padding = { left: 30, right: 30, top: 20, bottom: 20 }
var dataset = [10, 20, 30, 40, 33, 24, 12, 5]
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right])
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0])
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
//矩形之间的空白
var rectPadding = 4
// 添加矩形元素
var rects = svg.selectAll('.myrect')
.data(dataset)
.enter()
.append('rect')
.attr('class', 'myrect')
.attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
.attr('x', function (d, i) {
return xScale(i) + rectPadding / 2
})
.attr('width', xScale.rangeBand() - rectPadding)
.attr('y', function (d) {
var min = yScale.domain()[0]
return yScale(min)
})
.attr('height', function (d) {
return 0
})
.transition()
.delay(function (d, i) {
return i * 200
})
.duration(2000)
.ease('bounce')
.attr('y', function (d) {
return yScale(d)
})
.attr('height', function (d) {
return height - padding.top - padding.bottom - yScale(d)
})
// 添加文字元素
var texts = svg.selectAll('.mytext')
.data(dataset)
.enter()
.append('text')
.attr('class', 'mytext')
.attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
.attr('x', function (d, i) {
return xScale(i) + rectPadding/ 2
})
.attr('dx', function () {
return (xScale.rangeBand() - rectPadding )/ 2
})
.attr('dy', function (d) {
return 20
})
.text(function (d) {
return d
})
.attr('y', function (d) {
var min = yScale.domain()[0]
return yScale(min)
})
.transition()
.delay(function (d, i) {
return i * 200
})
.duration(2000)
.ease('bounce')
.attr('y', function (d) {
return yScale(d)
})
// 添加x轴，y轴
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
.call(xAxis)
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
.call(yAxis)
}
</script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.myrect {
fill: steelblue;
}
.mytext {
fill: white;
text-anchor: middle;
}
</style>
</head>
<body>
</body>
</html>
