1、第一步，在文件里面引入D3.JS图形库，可以搜索在线的引入，如图：<script type="text/javascript" src="d3/d3.js"></script>
2、第二步，在引入图形库后，就要动态的创建一个SVG对象，用户绘制图形，如图：var data衡痕贤伎set = [50, 43, 120, 87, 99, 167, 142];var width= 500;var height = 500; var svg = d3.select("body").append("svg").attr("height", height).attr("width", width);
3、第三步，有了SVG对象后就是在body里面绘制想要的rect,如图：
4、第四步，绘制完直方图后，就是给这个直方图添加数据，也就是数据绑定到直方图上，如图：
5、第五步，到了这一步，就已经绘制完成，来看一下效果图：
6、本次经验只针对d3.v4.js的版本，其他版本可能会有冲突，具体内容已官方API问准