【d3.js教程01】d3入门 · D3.js征途

![](https://box.kancloud.cn/2016-04-19_57161003baa37.jpg) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .axis path, .axis line{ fill:none; stroke:black; shape-rendering: crispEdges; } .axis text{ font-family: sans-serif; font-size: 11px; } </style> <script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <svg></svg> <body> <script type="text/javascript"> var svg = d3.select("svg"); //获取svg元素 var dataset = [1.2,2.3,0.9,1.5,3.3]; //数据集 var max = d3.max(dataset); //选择数据集中最大值即3.3 var linear = d3.scale.linear() //添加比例尺 .domain([0,max]) .range([0,250]); //自定义比例尺范围 var rectHeight = 25; //矩形的高 svg.selectAll("rect") //获取目前svg中所有的矩形 .data(dataset) //绑定数据集到 .enter() //选择数据集比rect元素多出来的数据（因为svg中原先没有rect，也就是选中了所有的数据）（也就是为什么后面会产生很多个rect） .append("rect") //针对每个多出来的数据都添加一个rect元素 .attr("x",20) //设置rect 横坐标 .attr("y",function(d,i){ //设置rect 纵坐标 function中d代表dataset中的每一个data，i为index return i*rectHeight; }) .attr("width",function(d,i){ //设置rect 宽度（将数据集中的数据经过比例尺算出最终的数据） return linear(d); }) .attr("height",rectHeight-2) //设置rect 高度 .attr("fill","steelblue"); //rect填充色 var axis = d3.svg.axis() //设置坐标轴 .scale(linear) //为坐标轴设置比例尺 .orient("bottom") //设置坐标轴的方向 .ticks(7); //设置坐标轴上有几个刻度 svg.append("g") //g代表group,svg添加一个g .attr("class","axis") //设置g的css .attr("transform","translate(20,125)") //设置变形 .call(axis); //调用axis函数初始化（相当于axis(svg.append("g").attr("class","axis").attr("transform","translate(20,125)"))） </script> </body> </html> ~~~