1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>GDP折线图</title>
7 <script src="./d3.js"></script>
8 <style>
9 .axis path,
10 .axis line {
11 fill: none;
12 stroke: black;
13 shape-rendering: crispEdges;
14 }
15
16 .axis text {
17 font-family: sans-serif;
18 font-size: 11px
19 }
20 </style>
21 </head>
22
23 <body>
24 <script>
25 let dataset = [{
26 country: 'china',
27 gdp: [
28 [2000, 11920],
29 [2001, 13170],
30 [2002, 14550],
31 [2003, 16500],
32 [2004, 19440],
33 [2005, 22870],
34 [2006, 27930],
35 [2007, 35040],
36 [2008, 45470],
37 [2009, 51050],
38 [2010, 59490],
39 [2011, 73140],
40 [2012, 83860],
41 [2013, 103550],
42 ]
43 }, {
44 country: "japan",
45 gdp: [
46 [2000, 47310],
47 [2001, 41590],
48 [2002, 39800],
49 [2003, 43020],
50 [2004, 46550],
51 [2005, 45710],
52 [2006, 43560],
53 [2007, 43560],
54 [2008, 48490],
55 [2009, 50350],
56 [2010, 54950],
57 [2011, 59050],
58 [2012, 59370],
59 [2013, 48980],
60 ]
61 }];
62 // svg画布
63 let width = 600;
64 let height = 600;
65 let svg = d3.select("body").append('svg')
66 .attr('width', width)
67 .attr('height', height)
68 // 外边框
69 let padding = { top: 50, right: 50, left: 50, bottom: 50};
70 // 计算gdp最大值
71 let gdpMax = 0;
72 for(let i = 0; i<dataset.length; i++) {
73 let currGdp = d3.max(dataset[i].gdp, function(d) {
74 return d[1];
75 });
76 if(currGdp > gdpMax) {
77 gdpMax = currGdp
78 }
79 }
80 // 定义比例尺
81 let xScale = d3.scale.linear()
82 .domain([2000, 2013])
83 .range([0, width - padding.left - padding.right]);
84 let yScale = d3.scale.linear()
85 .domain([0, gdpMax * 1.1])
86 .range([(height - padding.top - padding.bottom), 0]);
87
88 // 创建一个线段生成器
89 let linePath = d3.svg.line()
90 .x(function(d) {
91 return xScale(d[0])
92 })
93 .y(function(d) {
94 return yScale(d[1]);
95 })
96 .interpolate('cardinal');
97 // 定义两个颜色
98 let colors = [d3.rgb(0, 0, 255), d3.rgb(0, 255, 0)];
99 // 添加路径
100 svg.selectAll("path")
101 .data(dataset)
102 .enter()
103 .append('path')
104 .attr('d', function(d) {
105 return linePath(d.gdp); //返回线段生成器得到的路径
106 })
107 .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
108 .attr('fill', 'none')
109 .attr('stroke', function(d, i) {
110 return colors[i]
111 })
112 .attr('stroke-width', '3px');
113 // 创建坐标值
114 let xAxis = d3.svg.axis()
115 .scale(xScale)
116 .ticks(5)
117 .tickFormat(d3.format("d"))
118 .orient("bottom");
119 let yAxis = d3.svg.axis()
120 .scale(yScale)
121 .orient("left");
122 // 添加坐标轴
123 svg.append('g')
124 .attr('class', 'axis')
125 .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
126 .call(xAxis);
127 svg.append('g')
128 .attr('class', 'axis')
129 .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
130 .call(yAxis);
131 // 添加矩形
132 svg.selectAll('rect')
133 .data(dataset)
134 .enter()
135 .append('rect')
136 .attr('width', 20)
137 .attr('height', 15)
138 .attr('fill', function(d, i) {
139 return colors[i]
140 })
141 .attr('x', function(d, i) {
142 return padding.left + 80 * i;
143 })
144 .attr('y', height - padding.bottom)
145 .attr('transform', 'translate(20,30)');
146 // 添加文字
147 svg.selectAll('.text')
148 .data(dataset)
149 .enter()
150 .append('text')
151 .attr('font-size', '14px')
152 .attr('text-anchor', 'middle')
153 .attr('fill', '#000')
154 .attr('x', function(d, i) {
155 return padding.left + 80 * i
156 })
157 .attr('y', height - padding.bottom)
158 .attr("dx", "40px")
159 .attr('dy', '0.9em')
160 .attr('transform', 'translate(20, 30)')
161 .text(function(d) {
162 return d.country
163 })
164 </script>
165 </body>
166
167 </html>