D3.js入门实例----制作动态条形图

1.引入资源--js

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>

2.创建svg画布

var svg=d3.select("body")
        .select(".first")
        .append("svg")
	.attr("width","50%")
	.attr("height","50%")
	.style("padding","20px");

3.添加线性比例尺

var linear = d3.scale.linear()//矩形条比例尺
		.domain([0,d3.max(data2)]) //定义域
		.range([0,250]);  //值域
						
var linear2 = d3.scale.linear()//坐标轴比例尺
		.domain([0,5]) //定义域
		.range([125,0]);  //值域

(1)这里需要用到一个数组，等会儿画矩形也会用到这个数组

var data2 = [ 2.5,2.1,1.7,1.3,0.9 ];

4.画矩形条

svg.selectAll(".rect")//添加rect矩形元素
    .data(data2)
    .enter()  //循环数组查询
    .append("rect")
    .attr("class","rect")
    .attr("width","0") //矩形的宽，过渡动画前
    .attr("height","20") //矩形的高
    .attr("x",rectHeight) //矩形在x轴的位置
    .attr("y",function(d,i){  //矩形在y轴的位置，这里通过循环得到的y依次增加
        return i*rectHeight;
    })
    .transition()   //开启过渡效果
    .duration(1000) //执行动画的时间--毫秒
    .delay(function(d,i){ //指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒
        return 200*i;
    })
    .attr("width",function(d){  //过渡后矩形的宽
	return linear(d);  //循环data2数组得到的值通过linear线性比例尺得到页面需要的宽
    })
    .attr("fill","rgb(0,255,255)")  //过渡后的矩形填充色
    .attr("height",rectHeight-5);

5.添加文字到矩形条上

var texts = svg.selectAll(".MyText")//添加文字
		        .data(data2)
		        .enter()
		        .append("text")
		        .attr("class","MyText")
		        .transition()
		        .duration(1000)
			.delay(function(d,i){
			    return 200*i;
			})
		        .attr("x", function(d,i){
		            return linear(d)-20;
		        } )
		        .attr("y",function(d,i){
		            return i*rectHeight;
		        })
		        .attr("dx",20)
		        .attr("dy",18)
		        .text(function(d){
		            return d;
		        });

6.画坐标轴

                        var axis = d3.svg.axis()
				.scale(linear)      //指定比例尺
				.orient("bottom")   //指定刻度的方向
				.ticks(5);          //指定刻度的数量
					     
			var axis2 = d3.svg.axis()
				.scale(linear2)      //指定比例尺
				.orient("left")   //指定刻度的方向
				.ticks(5);      //指定刻度的数量
			
       
			svg.append("g")
   				.attr("class","axis")
				.attr("transform","translate(24,135)") //设置x轴的位置
				.call(axis);  //为当前选择调用一个函数。
				
			svg.append("g")
   				.attr("class","axis")
				.attr("transform","translate(24,10)")  //设置y轴的位置
				.call(axis2);

（1）这里需要用的css样式为

                        .axis path,
			.axis line{
			    fill: none;
			    stroke: black;
			    shape-rendering: crispEdges;
			}

7.做到上一步之后在页面加载时，条形图已经能动起来了，效果图为：

8.接下来可以再为条形图添加一些互动

                            $(document).click(function(){
				if($("svg rect").attr("width")!=="0"){    //如果矩形宽部位0的话，执行下面语句
					
					svg.selectAll(".rect")
					.transition()  //开启过渡动画
					.duration(1000)
					.delay(function(d,i){ 
					    return 200*i;
					})
					.attr("width","0"); //宽度变为0
					
					
					svg.selectAll(".MyText")//添加文字
				        .transition()
						.duration(1000)
						.delay(function(d,i){
						    return 200*i;
						})
						.style("opacity","0");  //文字变透明
				}else{
					svg.selectAll(".rect")
					.transition()
					.duration(1000)
					.delay(function(d,i){
					    return 200*i;
					})
					.attr("width",function(d){
						return linear(d);
					});
					
					
					svg.selectAll(".MyText")//添加文字
				        .transition()
						.duration(1000)
						.delay(function(d,i){
						    return 200*i;
						})
				        .style("opacity","1");
				}
			});

9.添加上面这段代码之后，点击页面，矩形条收缩，再次点击，矩形条展开

全部代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://d3js.org/d3.v3.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<style>
			body{
				padding: 0;
				margin: 0;
			}
			.first{
				width: 80%;
				height: 800px;
				margin: 0 auto;
			}
			.axis path,
			.axis line{
			    fill: none;
			    stroke: black;
			    shape-rendering: crispEdges;
			}
			
			.axis text {
			    font-family: sans-serif;
			    font-size: 11px;
			   
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		
		<script>
			//var dataset = [ 250 , 210 , 170 , 130 , 90 ];
			
			var data2 = [ 2.5,2.1,1.7,1.3,0.9 ];
			
			var rectHeight = 25;
			
			var svg=d3.select("body")
					.select(".first")
					.append("svg")
					.attr("width","50%")
					.attr("height","50%")
					.style("padding","20px");
					

			var linear = d3.scale.linear()//矩形条比例尺
						.domain([0,d3.max(data2)]) //定义域
						.range([0,250]);  //值域
						
			var linear2 = d3.scale.linear()//坐标轴比例尺
						.domain([0,5]) //定义域
						.range([125,0]);  //值域
			
			svg.selectAll(".rect")//添加rect矩形元素
				.data(data2)
				.enter()
				.append("rect")
				.attr("class","rect")
				.attr("width","0")
				.attr("height","20")
				.attr("x",rectHeight)
				.attr("y",function(d,i){
					return i*rectHeight;
				})
				.transition()//开启过渡效果
				.duration(1000)
				.delay(function(d,i){
				    return 200*i;
				})
				.attr("x",rectHeight)
				.attr("y",function(d,i){
					return i*rectHeight;
				})
				.attr("width",function(d){
					return linear(d);
				})
				.attr("fill","rgb(0,255,255)")
				.attr("height",rectHeight-5);
				
				
			var texts = svg.selectAll(".MyText")//添加文字
		        .data(data2)
		        .enter()
		        .append("text")
		        .attr("class","MyText")
		        .transition()
				.duration(1000)
				.delay(function(d,i){
				    return 200*i;
				})
		        .attr("x", function(d,i){
		            return linear(d)-20;
		        } )
		        .attr("y",function(d,i){
		            return i*rectHeight;
		        })
		        .attr("dx",20)
		        .attr("dy",18)
		        .text(function(d){
		            return d;
		        });


			$(document).click(function(){
				if($("svg rect").attr("width")!=="0"){
					
					svg.selectAll(".rect")
					.transition()
					.duration(1000)
					.delay(function(d,i){
					    return 200*i;
					})
					.attr("width","0");
					
					
					svg.selectAll(".MyText")//添加文字
				        .transition()
						.duration(1000)
						.delay(function(d,i){
						    return 200*i;
						})
						.style("opacity","0");
				}else{
					svg.selectAll(".rect")
					.transition()
					.duration(1000)
					.delay(function(d,i){
					    return 200*i;
					})
					.attr("width",function(d){
						return linear(d);
					});
					
					
					svg.selectAll(".MyText")//添加文字
				        .transition()
						.duration(1000)
						.delay(function(d,i){
						    return 200*i;
						})
				        .style("opacity","1");
				}
			});
			var axis = d3.svg.axis()
					     .scale(linear)      //指定比例尺
					     .orient("bottom")   //指定刻度的方向
					     .ticks(5);          //指定刻度的数量
					     
			var axis2 = d3.svg.axis()
					     .scale(linear2)      //指定比例尺
					     .orient("left")   //指定刻度的方向
					     .ticks(5);      //指定刻度的数量
			
       
			svg.append("g")
   				.attr("class","axis")
				.attr("transform","translate(24,135)")
				.call(axis);
				
			svg.append("g")
   				.attr("class","axis")
				.attr("transform","translate(24,10)")
				.call(axis2);
				
			
		</script>
	</body>
</html>

D3.js入门实例----制作动态条形图

猜你喜欢