【d3.js教程01】d3入门

【d3.js教程01】d3入门_第1张图片

<!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>


你可能感兴趣的:(d3,d3.js,d3教程,d3.js教程,d3入门)