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

最新推荐文章于 2023-10-18 15:00:29 发布

iteye_16498

最新推荐文章于 2023-10-18 15:00:29 发布

阅读量396

点赞数

分类专栏： D3 文章标签： d3 函数作为绑定图片的数据

本文链接：https://blog.csdn.net/iteye_16498/article/details/82635760

版权

D3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果你把函数绑定给图片，那么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>