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>