GDP折线图 

  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>

 

posted @ 2021-01-07 09:57  鼓舞飞扬  阅读(474)  评论(0)    收藏  举报