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>