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

最新推荐文章于 2021-11-18 15:57:18 发布

iteye_16498

最新推荐文章于 2021-11-18 15:57:18 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏： D3 文章标签： d3 进入更新退出模式

本文链接：https://blog.youkuaiyun.com/iteye_16498/article/details/82635744

D3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍使用D3.js进行数据可视化的具体实践过程，包括如何通过“进入”、“更新”和“退出”操作来动态调整页面上的条形图。通过定时更新数据，实现了条形图的动态展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

D3对数据和图片的处理规则：
操作对象：数据集合 + 图片集合
操作名称：进入，更新，退出。

进入：选择出来没有绑定图片的数据。
更新：选择已经绑定图片和数据的集合。
退出：选择没有绑定数据的图片。

下面是实例，各种注意在注释中已经表明。


<!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>