在之前的項(xiàng)目里面我們已經(jīng)玩過echarts了绰垂，但它的封裝程度太高了键菱，容我們發(fā)揮的空間不大（但是在做基礎(chǔ)的交互圖表時(shí)十分方便）。所以努溃，今次我們來玩玩強(qiáng)大的D3.js硫嘶，這可謂是近年來最受歡迎的可視化組件了。
D3的自由度非常高梧税，可以提供給玩家們很多想象與發(fā)揮空間沦疾，支持創(chuàng)作多種自定義的圖形。一般玩家在創(chuàng)作復(fù)雜的可視化圖形時(shí)更加傾向使用D3第队。但是其優(yōu)點(diǎn)同時(shí)也是其缺點(diǎn)：創(chuàng)作一個(gè)簡單的條形圖也要耗費(fèi)比較多時(shí)間哮塞！
D3 = Data-Driven Documents，數(shù)據(jù)驅(qū)動的文件凳谦。也就是文檔內(nèi)容的生成以及更新等一系列過程是基于數(shù)據(jù)的改變來驅(qū)動的彻桃。
其中有三個(gè)狀態(tài)：ENTER-UPDATE-EXIT。簡單解釋一下：ENTER狀態(tài)就是為已有的數(shù)據(jù)添加圖形晾蜘；UPDATE就是更新數(shù)據(jù)與圖形；EXIT就是為根據(jù)數(shù)據(jù)刪去多余的圖形眠屎。以下就是根據(jù)D3這個(gè)基本的運(yùn)行模式來實(shí)現(xiàn)的動態(tài)數(shù)據(jù)更新的例子：（注意D3.js的“函數(shù)即對象”的鏈?zhǔn)綄懛ㄌ藿唬cjQuery類似）
運(yùn)行效果：（每1.5s會更新一次數(shù)據(jù)）「鸟茫可見岖常，就話這幾個(gè)條條也需要幾十行的代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array as Data</title>
<script type="text/javascript" src="d3.js"></script>
<style>
body{
font-family: "helvetica";
}
.h-bar {
min-height: 15px;
min-width: 10px;
background-color: steelblue;
margin-bottom: 2px;
font-size: 11px;
color: #fff;
text-align: right;
padding-right: 2px;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];
var dataRange = d3.scale.linear() //創(chuàng)建一個(gè)值域的線性比例尺
.domain([0,100])
.range([0,300]);
var colorRange = d3.scale.linear() //創(chuàng)建一個(gè)顏色的線性比例尺
.domain([0,100])
.range(["#99CCCC", "#003333"]);
function render(data) {
// Enter
d3.select("body").selectAll("div.h-bar") //“應(yīng)該”選擇第一個(gè)body元素以及其下的類名為"h-bar"的div標(biāo)簽
.data(data) //綁定數(shù)據(jù)與圖形
.enter() //進(jìn)入狀態(tài)（增加圖形匹配多余的數(shù)據(jù)）
.append("div") //添加div
.attr("class","h-bar") //添加類名
.append("span"); //添加span
// Update
d3.select("body").selectAll("div.h-bar") //選擇第一個(gè)body元素以及其下的類名為"h-bar"的div標(biāo)簽
.data(data) //綁定數(shù)據(jù)與圖形
.style("width",function(d){
return dataRange(d) + "px"; //調(diào)用函數(shù)返回與該圖形綁定的數(shù)據(jù)d
})
.style("background-color",function(d){
return colorRange(d); //調(diào)用函數(shù)返回與該圖形綁定的數(shù)據(jù)d
})
.select("span")
.text(function(d){
return d; //調(diào)用函數(shù)返回與該圖形綁定的數(shù)據(jù)d
});
// Exit
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit() //退出狀態(tài)（刪除沒有數(shù)據(jù)的多余的圖形）
.remove();
}
setInterval(function(){
data.shift(); //刪除數(shù)組的第一個(gè)數(shù)據(jù)
data.push(Math.round(Math.random() * 100)); //在數(shù)組后增加一個(gè)1-100的隨機(jī)數(shù)
render(data);
},1500); //2s執(zhí)行一次
render(data);
</script>
</body>
</html>
