操作对象：数据集合 + 图片集合
操作名称： 进入，更新，退出。
进入：选择出来没有绑定图片的数据。
更新：选择已经绑定图片和数据的集合。
退出：选择没有绑定数据的图片。
下面是实例，各种注意在注释中已经表明。
<!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>