标签：GDP return attr svg padding let 折线图 d3
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>
标签：GDP,return,attr,svg,padding,let,折线图,d3 来源： https://www.cnblogs.com/guwufeiyang/p/14244848.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。