【d3.js教程01】d3入门

来源：互联网发布：中信建投用什么软件编辑：程序博客网时间：2024/05/18 00:42
<!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>
1 0