操作對象：數據集合 + 圖片集合
操作名稱： 進入，更新，退出。
進入：選擇出來沒有綁定圖片的數據。
更新：選擇已經綁定圖片和數據的集合。
退出：選擇沒有綁定數據的圖片。
下面是實例，各種注意在註釋中已經表明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.h-bar {
background: green;
margin-top: 5px;
color: "#000";
}
</style>
<script type="text/javascript" src="/angularJs/js/d3_v2.js"></script>
<script type="text/javascript">
var data = [12,22,23,34,55,64,53,23];
function render(data){
//enter
d3.select("body").selectAll("div.h-bar")
.data(data)
.enter() //把沒有綁定圖片的數據全部選擇出來（進行圖片的綁定）
//just only data
.append("div")
.attr("class","h-bar")
.append("span");
//更新
d3.select("body").selectAll("div.h-bar")
.data(data) //把綁定的所有數據和圖片選擇出來進行圖片寬度的改變
//both data + image
.style("width",function(d){
return (d*3) + "px";
})
.select("span")
.text(function(d){
return d;
})
//退出
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit() //把沒有綁定數據的圖片選擇出來
//just only image
.remove();
}
//每隔1.5s調用
setInterval(function(){
data.shift();//更改數據，去掉數組的第一個元素
//更改數據，給數組末尾添加一個隨機的數據
data.push(Math.round(Math.random() * 100));
render(data);
},1500);
render(data);
</script>
</head>
<body>
</body>
</html>