-
Notifications
You must be signed in to change notification settings - Fork 0
/
D3_11.html
90 lines (78 loc) · 3.26 KB
/
D3_11.html
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./D3.js" charset="utf-8"></script>
</head>
<body>
</body>
<script charset="utf-8">
var width = 500;//svg绘制区域宽度
var height = 500;//svg绘制区域高度
var svg = d3.select('body').append('svg').attr('width',width).attr('height',height);//新建svg绘制区域
var data = [//数据
{
country: "china",
gdp: [[2000,11920],[2001,13170],[ 2002,14550], [2003,16500],[ 2004,19440],[ 2005,22870],[2006,27930],[ 2007,35040],[ 2008,45470], [2009,51050],[ 2010,59490],[ 2011,73140], [2012,83860],[ 2013,103550]]
},
{
country: "japan",
gdp: [[2000,47310],[2001,41590],[ 2002,39800], [2003,43020],[ 2004,46550],[ 2005,45710], [2006,43560],[ 2007,43560],[ 2008,48490], [2009,50350],[ 2010,54950],[ 2011,59050], [2012,59370],[ 2013,48980]]
}
];
var padding = { top: 50 , right: 50, bottom: 50, left: 50 };//绘制区域与图表边距
var gdpmax = 0;//获取最大的数据值
for(var i=0;i<data.length;i++){
var currGdp = d3.max(data[i].gdp,function(d){
return d[1];
})
if(currGdp > gdpmax){
gdpmax = currGdp;
}
}
var xScale = d3.scaleLinear().domain([2000,2013]).range([0,width - padding.left - padding.right]);//定义x轴的定义域和值域
var yScale = d3.scaleLinear().domain([0,gdpmax * 1.1]).range([height - padding.top - padding.bottom,0]);//定义y轴的定义域和值域
var linePath = d3.line().x(function(d,i){//新建直线生成器
return xScale(d[0]);
}).y(function(d){
return yScale(d[1]);
});
var colors = [d3.rgb('blue'),d3.rgb('orange')];//定义线段颜色
svg.selectAll('path').data(data).enter().append('path')//绘制线段
.attr('transform','translate('+padding.left+','+padding.top+')')
.attr('d',function(d,i){
return linePath(d.gdp);
})
.attr('fill','none')
.attr('stroke-width','3px')
.attr('stroke',function(d,i){
return colors[i];
})
var xAxis = d3.axisBottom(xScale).ticks(5).tickFormat(d3.format('d'));//定义x轴
var yAxis = d3.axisLeft(yScale);//定义y轴
svg.append('g').attr('class','axis').attr('transform','translate('+padding.left+','+(height - padding.bottom)+')').call(xAxis);//添加x轴
svg.append('g').attr('class','axis').attr('transform','translate('+padding.left+','+padding.top+')').call(yAxis);//添加y轴
svg.selectAll('rectChina').data(data).enter().append('rect').attr('width',20).attr('height',10)//绘制图表实例
.attr('x',function(d,i){
return i*100;
})
.attr('y',20)
.attr('fill',function(d,i){
return colors[i];
});
svg.selectAll('textChina').data(data).enter().append('text').attr('width',20).attr('height',10)//绘制图表实例文字
.text(function(d){
return d.country;
})
.attr('x',function(d,i){
return i*100 + 30;
})
.attr('y',30)
.attr('fill',function(d,i){
return colors[i];
});
</script>
</html>