D3.js入門例項----製作動態條形圖
阿新 • • 發佈：2019-01-30
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) //執行動畫的時間--毫秒 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>