昨天晚上本来打算花一点时间把之前学的柱状图改一下，用CSV文件来替换自定义数据。这一替换可不得了，一晚上就搭进去了，还好今早找到了问题的所在，原因在于我的数据引用出了问题。
现在就来讲解一下如何画一个柱状图吧：
柱状图的画法和折线图其实很类似，只要掌握了比例尺的用法和坐标轴的画法，我们只要在此基础上添加“rect”元素添加矩形就可以了，但这其中也有一些要点，我会在其中标出，希望对你有用。
对于d3不同版本带来的代码不适用的解决办法：1）、下载对应的v3或者v4版本加到代码引用里可以解决。
2）、对于我博客的代码，只要你确保网络畅通，应该不会出错
1<!DOCTYPE html> 2<html> 3 <head> <meta charset="utf-8"> 4 <title>文档的标题</title> 5</head> 6<body> 7<script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script>//网页引用d3库 8</body> 9</html>
好了，接下来就是完整代码：
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>绘制图形</title> 6 </head> 7 <style> 8 /* 给body添加大小 */ 9 body, 10 html { 11 height: 100%; 12 } 13 14 { 15 padding: 0; 16 margin: 0; 17 } 18 19 .axis path, 20 .axis line { 21 fill: none; 22 stroke: black; 23 shape-rendering: crispEdges; 24 } 25 26 .axis text { 27 font-family: sans-serif; 28 font-size: 11px; 29 } 30 31 .MyRect { 32 fill: palevioletred; 33 } 34 35 .MyText { 36 fill: black; 37 text-anchor: middle; 38 font-size: 10px; 39 } 40 </style> 41 <body> 42 <script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script> 43 <script> 44 var width = 500; 45 var height = 500; 46 var svg = d3.select("body") 47 .append("svg") 48 .attr("width", width) 49 .attr("height", height); 50 var padding = { 51 left: 30, 52 right: 30, 53 top: 20, 54 bottom: 20 55 }; 56 ////http://blog.sina.com.cn/s/blog_ad72a03a0102v1nx.html 含解释 57 58 59 d3.csv("../bardata.csv", function(error, data, i) { 60 if (error) { 61 console.log(error); 62 } 63 64 console.log(data); 65 66 var datavalue = [] 67 for (let i = 0; i < data.length; i++) { 68 datavalue.push(data[i].value) 69 } // var xp = d3.scale.ordinal() 70 // // .domain(d3.range(dataset.length)) 71 // // 使用map来输入data数组中的字符 72 // .domain(data.map(function(d,i){ 73 // // console.log(d.items) 74 // return d.items 75 // })) 76 // .rangeRoundBands([0,width-padding.left-padding.right]); 77 78 79 // var xp = d3.scale.ordinal() 80 // .domain(data.map(function(d){ return d.items;})) 81 // .rangeBands([0,width-padding.left-padding.right]);//以上定义xp（即xscale）横坐标序数比例尺的方法都可以试一下，会有不同的体验 82 var xp = d3.scale.ordinal() 83 .domain(data.map(function(d) { 84 return d.items; 85 })) 86 .rangeRoundBands([0, width - padding.left - padding.right], 0.1); 87 88 var yp = d3.scale.linear() 89 .domain([0, d3.max(datavalue)]) 90 .range([height - padding.top - padding.bottom, 0]) //反过来？为什么呢（之前似乎讲过哦0w0） 91 92 var xAxis = d3.svg.axis() 93 .scale(xp) 94 .orient("bottom"); 95 96 var yAxis = d3.svg.axis() 97 .scale(yp) 98 .orient("left"); 99 100 var rectPadding = 4; 101 102 var rects = svg.selectAll(".MyRect") 103 .data(data) 104 .enter() 105 .append("rect") 106 .attr("class", "MyRect") 107 .attr("transform", "translate(" + padding.left + "," + padding.top + ")") 108 .attr("x", function(d, i) { 109 return xp(d.items); 110 }) 111 .attr("y", function(d) { 112 return yp(d.value); 113 }) 114 .attr("width", xp.rangeBand() - rectPadding) 115 .attr("height", function(d) { 116 return height - padding.top - padding.bottom - yp(d.value); 117 }) 118 .on("mouseover", function(d, i) { 119 d3.select(this) 120 .style("fill", "aliceblue"); 121 }) 122 .on("mouseout", function(d, i) { 123 d3.select(this) 124 .style("fill", "greenyellow"); 125 // 使用style替换attr才会有交互的效果 126 }); 127 var texts = svg.selectAll(".MyText") 128 .data(data) //害我出错的就是这儿了，我之前写的是.data(datavalue),datavalue又是哪儿来的呢？为什么引用错误，会导致tips的位置错乱呢？ 129 .enter() 130 .append("text") 131 .attr("class", "MyText") 132 .attr("transform", "translate(" + padding.left + "," + padding.top + ")") 133 .attr("x", function(d) { 134 return xp(d.items);//上面问题的答案都在这儿，d=》data，数据的意思，那data是哪儿来的呢？当然是我们传进来的，那为什么data不会出错，而datavalue会错呢？//是由于xp（）是我们之前定义的序数比例尺，我们如果想要使用就必须传入适合的数据（包含x，y），如果只是传入datavalue就只有y值，而我们并没有将x传入。 135 }) 136 .attr("y", function(d) { 137 return yp(d.value); 138 }) 139 .attr("dx", function() { 140 return (xp.rangeBand() - rectPadding) / 2; 141 }) 142 .attr("dy", function(d) { 143 return 15; 144 }) 145 .text(function(d) { 146 return d.value; 147 }); 148 149 svg.append("g") 150 .attr("class", "axis") 151 .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")") 152 .call(xAxis); 153 154 svg.append("g") 155 .attr("class", "axis") 156 .attr("transform", "translate(" + padding.left + "," + padding.top + ")") 157 .call(yAxis); 158 }) 159 </script> 160 </body> 161</html>
老样子，好货沉底
———————————————————————————————————————————————————————————————————
修改：由于浏览器的沙箱机制导致直接复制代码是没法直接运行的，所以贴出原码外加数据
链接：https://pan.baidu.com/s/13RhuYM9pz0WiFya0IcOrJQ
提取码：069a
一、最简单的方法是下载HbuiderX，然后导入文件，打开。（二不用看了）
二、在此如果你没有安装任何服务器，直接想用文件启动网页的化，你可以这样做：
1）、确保你的电脑上安装了Python（二或者三的版本都可以）
2）、 
在文件路径下打开cmd（上图最简，打开文件，输入cmd，回车ok）
3）、键入命令
Python2用这个
4）、启动服务器
5）、浏览器中输入：
打开文件，结束。