D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit
D3.js的v5版本入门教程（第四章）
Update、Enter、Exit是D3.js中很重要的概念，下面来讲一下它们到底是什么？（当你看完后。你就会知道如果数据集个数和选择集个数不匹配的情况下使用data()，D3.js会怎么办）
在使用data()时，例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定，但是，现在就有一个问题——数据集个数和选择集个数不匹配怎么办？这样就需要理解Update、Enter、Exit
例子一：update和enter：数组[3,6,9,12,15]绑定到三个<p>上。可以想象到，数组的最后两个元素没有可以绑定的元素，这时D3会建立两个空的元素与数组最后的两个数据相对于，那么这部分就称为Enter。而有元素与数据对应的部分就称为Update
例子二：exit：如果数组[3]绑定到三个<p>上，可以想象，最后两个<p>没有可绑定的数据，那么没有数据绑定的部分就称为Exit
如下图(此图片非原创)
1、Update与Enter的使用
<body>
<p>dog</p>
<p>cat</p>
<p>pig</p> <script>
var dataset = [3,6,9,12,15];
var p = d3.select("body")
.selectAll("p");
var update = p.data(dataset)//绑定数据,并得到update部分
var enter = update.enter();//得到enter部分
//下面检验是否真的得到
//对于update的处理
update.text(function(d,i){
return "update: "+d+",index: "+i;
})
//对于enter的处理
//注意，这里需要先添加足够多的<p>，然后在添加文本
var pEnter = enter.append("p")//添加足够多的<p>
pEnter.text(function(d,i){
return "enter: "+d+",index: "+i;
})
</script>
</body>
运行结果：
代码说明：
-var update = p.data(dataset) 表示绑定数据,并得到update部分，
-var enter = update.enter() 表示得到到enter部分
-var pEnter = enter.append("p")//添加足够多的<p>
pEnter.text(function(d,i){
return "enter: "+d+",index: "+i;
}) 表示添加足够多的<p>，并设置文本
2、Update与Exit的使用
<body>
<p>dog</p>
<p>cat</p>
<p>pig</p>
<p>rat</p> <script>
var dataset = [3,6];
var p = d3.select("body")
.selectAll("p");
var update = p.data(dataset)//绑定数据,并得到update部分
var exit = update.exit();//得到exit部分
//下面检验是否真的得到
//对于update的处理
update.text(function(d,i){
return "update: "+d+",index: "+i;
})
//对于exit的处理通常是删除 ，但在这里我并没有这么做
exit.text(function(d,i){
return "exit";
})
</script>
</body>
运行结果：
代码说明：
-这里需要说明的是：在得到exit部分后，不需要使用append("xx")来添加元素，而enter需要，这样很容易理解其实。还有就是，对于exit部分的处理通常是删除exit.remove();（这里还没讲，下一章会详细讲解）
————————————————
版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34414916/article/details/80027353
D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit的更多相关文章
- D3.js的v5版本入门教程（第九章）——完整的柱状图
D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...
- D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形
D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...
- D3.js的v5版本入门教程（第十一章）——交互式操作
D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...
- D3.js的v5版本入门教程（第八章）—— 坐标轴
D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...
- D3.js的v5版本入门教程（第七章）—— 比例尺的使用
D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...
- D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据
D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...
- D3.js的v5版本入门教程（第十章）
在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...
随机推荐
- Java之路---Day05
2019-10-19-21:09:31 面向对象的封装性 封装性 概念:封装就是将一些细节信息隐藏起来,对于外界不可见 面向对象封装性在Java中的体现 1.方法就是一种封装 public class ...
- 【转载】C#中double.TryParse方法和double.Parse方法的异同之处
在C#编程过程中,double.TryParse方法和double.Parse方法都可以将字符串string转换为double类型,但两者还是有区别,最重要的区别在于double.TryParse方法 ...
- Vue项目开发相关问题总结
Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- v-for循环列表，展开样式随手风琴
<div class="product_box" v-for="(item,index) of kinds" :key="index" ...
- DataPipeline如何实现数据质量管理？
数据质量管理已经成为数据治理的重要组成部分.高质量的数据是企业进行决策的重要依据. DataPipeline数据质量平台整合了数据质量分析.质量校验.质量监控等多方面特性, 以保证数据质量的完整性.一 ...
- MVC、MVP及MVVM之间的关系
介绍 写这篇随笔完全是为了加深自己的印象,毕竟写比看能获得得更多,另外本人对这三种模式的认识还是浅薄的,有待在以后的工作学习中有更深入的理解,因此不免会有误解,这里推荐大家阅读廖雪峰关于MVVM的介绍 ...
- 大数据量高并发的数据库优化,sql查询优化
一.数据库结构的设计 如果不能设计一个合理的数据库模型,不仅会增加客户端和服务器段程序的编程和维护的难度,而且将会影响系统实际运行的性能.所以,在一个系统开始实施之前,完备的数据库模型的设计是必须的. ...
- golang的channel实现
golang的channel实现位于src/runtime/chan.go文件.golang中的channel对应的结构是: // Invariants: // At least one of c.s ...
- django的缓存实例应用
那么多的可配置方法,我们用那个呢. 首先在setting中配置你想要的缓存,我这里就用文件的方式是配置.如图: 第二步: 第三步: 第四步: 实现结果: 总结: 都是指明当前资源的有效期,控制浏览器 ...
- Django-视图函数view
目录 1.Django的视图函数view 1.1一个简单的视图 2.CBV和FBV 3.使用Mixin(了解) 4.给视图加装饰器 4.1使用装饰器装饰FBV 4.2使用装饰器装饰CBV 5.requ ...