D3.js（完整的柱状图）

Posted on   |   In   |     |   visitors

首先，我们先看一下最终的柱状图效果展示。如下图所示，一个完整的柱状图需要包含三个部分：矩形、文字、坐标轴。

柱状图

添加SVG画布

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 画布大小
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');

定义比例尺

1
2
3
4
5
// 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]);

添加矩形及文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// 矩形之间的空白
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;
}

定义并添加坐标轴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 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');

可以从https://github.com/brucewar/practice-in-D3获取示例代码

Enjoy it? Donate me!您的支持将鼓励我继续创作！

热评文章