首先，我们先看一下最终的柱状图效果展示。如下图所示，一个完整的柱状图需要包含三个部分：矩形、文字、坐标轴。
添加SVG画布
// 画布大小
var width = 400,
height = 400;
// 画布四个方向上的留白
var margin = {
top: 20,
right: 30,
bottom: 20,
left: 30
};
var chart = d3.select('.chart')
.attr('width', width)
.attr('height', height)
.append('g');定义比例尺
// define x,y point rule
var x = d3.scale.ordinal()
.rangeRoundBands([0, width - margin.left - margin.right]);
var y = d3.scale.linear()
.range([height - margin.top - margin.bottom, 0]);添加矩形及文字
// 矩形之间的空白
var barPadding = 4;
/**
* 这里用到了d3异步读取数据的接口csv
* chart.csv的文件内容如下：
* name,value
* Locke,4
* Reyes,8
* Ford,15
* Jarrah,16
* Shephard,23
* Kwon,42
*/
d3.csv('data/chart.csv', type, function(err, data){
x.domain(data.map(function(d){ return d.name; }));
y.domain([0, d3.max(data, function(d){
return d.value;
})]);
// append rect
chart.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('x', function(d){ return x(d.name) + barPadding / 2; })
.attr('y', function(d){ return y(d.value); })
.attr('height', function(d){ return height - margin.top - margin.bottom - y(d.value); })
.attr('width', x.rangeBand() - barPadding);
// append text
chart.selectAll('.text')
.data(data)
.enter()
.append('text')
.attr('class', 'text')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('x', function(d){
return x(d.name) + barPadding / 2;
}).attr('y', function(d){
return y(d.value);
}).attr('dx', function(){
return (x.rangeBand() - barPadding) / 2;
}).attr('dy', 20)
.text(function(d){
return d.value;
});
});
function type(d){
d.value = +d.value;
return d;
}定义并添加坐标轴
// define axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(10); //显示的刻度值个数
// append x axis
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + margin.left + ', ' + (height - margin.bottom) + ')')
.call(xAxis);
// append y axis
chart.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('value');