D3-3 进去，更新，退出模式例子（函数作为数据）

D3-3 进入，更新，退出模式例子（函数作为数据）
如果你把函数绑定给图片，那么d3会自动调用这个函数。啥都不说了，都在例子中了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  .v-bar {
    min-height: 1px;
    min-width: 30px;
    background-color: #4682b4;
    margin-right: 2px;
    font-size: 10px;
    color: #f0f8ff;
    text-align: center;
    width: 10px;
    display: inline-block;
}
</style>
<script type="text/javascript" src="/angularJs/js/d3_v2.js"></script>
<script type="text/javascript">
    //定义全局变量data，每次调用render对这个data
    //进行操作（增加数据，删除数据等
    var data = [];
    
    var next = function(x){
    	return 15 + x*x;
    };
    
    var newData = function(){
    	data.push(next);
    	return data;
    }
    
    function render(){
    	
    	//第一：选中container下面的所有div（尽管这时还没有div）
    	//第二：调用data(new newData)进行数据与图形绑定。
    	//第三：注意此时进行绑定的不是直接的数据而是newData方法
    	       //D3框架如果看到绑定的不是数据，而是函数，d3会自动
    	       //调用这个函数，当前这个函数一定是会返回数据的函数
               //每次调用render函数，就会自动调用newDate函数
    	var selection = d3.select("#container").selectAll("div").data(newData);
    	
    	//给没有绑定图片的数据，添加图片样式
    	selection.enter().append("div").append("span");
    	
    	//给没有绑定数据的图片样式删掉
    	selection.exit().remove();
    	
    	//更新已经绑定数据图片的数据(更新他们的高度，和span张的文字)
    	selection.attr("class","v-bar")
    	.style("height",function(d,i){  //特别注意这里的参数d是一个函数
    		return d(i) + "px";
    	})
    	.select("span").text(function(d,i){
    		return d(i);
    	});
    }
    
    //每隔1500毫秒调用render函数
    setInterval(function(){
    	render();
    },1500);
    
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

D3-3 进去，更新，退出模式例子（函数作为数据）

相关推荐