<html>
<head>
<meta charset="utf-8">
<title>d3研究室</title>
<style>
.h-bar{
height:15px;
background-color: chartreuse;
text-align: right;
border:solid 1px black;
}
</style>
</head>
<body>
<script src="./d3.v3.min.js" charset="utf-8"></script>
<script>
var data=[];
for(var i=0;i<10;i++){
var obj={
width:Math.ceil(Math.random()*100),
color:Math.ceil(Math.random()*100)
};
data.push(obj);
}
//创建映射，将0至100间的值线性映射成"#add8e6"到"blue"之间的颜色
var colorScale=d3.scale.linear()
.domain([0,100]).range(["#add8e6","blue"]);
var render=function(){
//enter 计算数据与显示元素的差集，补充不足
d3.select("body").selectAll("div.h-bar")
.data(data)
.enter()
.append("div")
.attr("class",'h-bar')
.append("span");
//update 更新内容
d3.select("body").selectAll("div.h-bar")
.data(data)
.style("width",function(d,i){
return (d.width*3)+"px";
})
.style("background-color",function(d){
return colorScale(d.color);
})
.select("span")
.text(function(d){
return d.width;
});
//exit 删掉多于的元素
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit()
.remove();
};
setInterval(function(){
data.shift();
var obj={
width:Math.ceil(Math.random()*100),
color:Math.ceil(Math.random()*100)
};
data.push(obj);
render();
},1500);
</script>
</body>
</html>
