理解Update、Enter、Exit 与 添加、删除元素

在使用data()绑定数据时，例如：现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定，但是，现在就有一个问题——数据集个数和选择集个数不匹配怎么办？这样就需要理解Update、Enter、Exit
通过以下图可以理解 Update、Enter、Exit

  • 数组[3,6,9,12,15]绑定到三个<p>上。可以想象到，数组的最后两个元素没有可以绑定的元素，这时D3会建立两个空的元素与数组最后的两个数据相对于，那么这部分就称为Enter。而有元素与数据对应的部分就称为Update

  • 如果数组[3]绑定到三个<p>上，可以想象，最后两个<p>没有可绑定的数据，那么没有数据绑定的部分就称为Exit

Update与Enter的使用
<body>

    <p>name1</p>

    <p>name2</p>

    <p>name3</p>

    <script>

    	var dataset = [3,6,9,12,15];

    	var p = d3.selectAll("p");

    	var update = p.data(dataset)//绑定数据,并得到update部分

    	var enter = update.enter();//得到enter部分

    	//下面检验是否真的得到

    	//对于update的处理

    	// 匿名函数第一个参数 d 为每个元素所绑定的对应数据 data

    	// 匿名函数第一个参数 i 为每个元素的索引，从 0 开始递增

    	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;

    	})

		/*

			运行结果如下：

			update: 3,index: 0

			update: 6,index: 1

			update: 9,index: 2

			enter: 12,index: 3

			enter: 15,index: 4

		*/

    </script>

  </body>
Update与Exit的使用
<body>

	<p>name1</p>

    <p>name2</p>

    <p>name3</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.remove()

        exit.text(function(d,i){

            return "exit";

        })

        /*

			运行结果如下：

			update: 3,index: 0

			update: 6,index: 1

			exit

		*/

    </script>

 </body>
selection.join(enter[, update][, exit])

这是V5版本的新特性，这种方法很方便，可以代替selection.enter, selection.exit, selection.append, selection.remove, selection.order.

svg.selectAll("circle")

  .data(data)

  .join("circle")

    .attr("fill", "none")

    .attr("stroke", "black");

简写相当于:

svg.selectAll("circle")

  .data(data)

  .join(

    enter => enter.append("circle"),

    update => update,

    exit => exit.remove()

  )

    .attr("fill", "none")

    .attr("stroke", "black");

通过在进入、更新和退出上传递单独的函数，您可以更好地控制发生的事情。通过指定选择的关键函数、数据，您可以尽量减少对DOM的更改以优化性能。例如，为输入和更新设置不同的填充颜色:

svg.selectAll("circle")

  .data(data)

  .join(

    enter => enter.append("circle").attr("fill", "green"),

    update => update.attr("fill", "blue")

  )

    .attr("stroke", "black");

4. 理解Update、Enter、Exit 与 添加、删除元素的更多相关文章

  1. 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

    在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当 ...

  2. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  3. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  4. Java ArrayList正确循环添加删除元素方法及分析

    在阿里巴巴Java开发手册中,有这样一条规定: 但是手册中并没有给出具体原因,本文就来深入分析一下该规定背后的思考. 一.foreach循环 foreach循环(Foreach loop)是计算机编程 ...

  5. 集合遍历过程iterator， 添加删除元素报异常

    list  set  遍历过程中添加或者删除元素,报异常. 使用iterator 也会报异常 ConcurrentModificationException remove只能用迭代器的remove,而 ...

  6. JS中的数组，添加删除元素,判断是否存在一个值的方法总结

    一.添加元素: 1:在最后添加,返回数组长度:arr.push(...); 2:在最前面添加,返回数组长度:arr.unshift(...); 3:在指定位置添加,没有返回值:arr[i] = xxx ...

  7. js添加删除元素内容

    <body> <div id="div" style="background: yellow;width:200px;height:200px;&quo ...

  8. JavaScript HTML DOM---遗漏知识再整理（向html添加/删除元素，改变内容和css）

    1.  HTML DOM 改变 HTML 内容:(HTML DOM 允许 JavaScript 改变 HTML 元素的内容.) (1)改变 HTML 输出流 在 JavaScript 中,docume ...

  9. js添加删除元素

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  10. vue 样式渲染，添加删除元素

    <template> <div> <ul> <li v-for="(item,index) in cartoon" :key=" ...

随机推荐

  1. linux mint 18.1 安装备忘录

    本次全新安装mint18.1,遇到一些问题,全部解决,怕日后忘记,再捣鼓琢磨,浪费时间,特记录在此: 一.楷体字体问题 安装完后的mint18.1,显示都是楷体,经请教薄荷论坛高手,可用以下办法解决: ...

  2. Expression Tree 遍历集合

    场景 从接口返回的数据是集合,却是 object 类型的.这个时候需要遍历这个集合.现提供两种方法. 方法一: 因为集合是可枚举的,所以可以尝试转为 IEnumerable 类型,然后遍历即可. st ...

  3. selenium--启动不同的浏览器

    在自动化测试经常用到 Firefox,Chrome,IE 浏览器,Firefox 自带驱动,所以我一直用这个测试.那么同一段代码能不能在同时打开两个浏览器呢?当然是可以,浏览器名称参数化. 重点:Ch ...

  4. maven配置下载包 解决SunCertPathBuilderException：unable to find valid certification path to requested target

    ​ 解决 『SunCertPathBuilderException:unable to find valid certification path to requested target』 问题 ★ ...

  5. 洛谷T31018 经典题丶改（LCT+离线）

    真的是一个大好题啊! QWQ首先我们考虑这种问题,如果直接在线做,估计应该是做不了,那我们是不是可以直接考虑离线. 将所有询问都按照\(r\)来排序. 然后依次加入每条边,计算\(a[i]<=n ...

  6. 洛谷2375 NOI2014动物园（KMP)

    题目链接: 题目. 简单一点来说,这个题就是求一个字符串的\(num\)数组的和,其中有\(num[i]\)表示1~i中有多少个不交叉的相等的前缀和后缀 的数目,要求一个\(O(n)\)的做法 QwQ ...

  7. Mac录屏同时录制系统声音和画外音(Soundflower无法安装解决方案)

    个人博客地址:xzajyjs.cn 前言 以前一直有录屏的需求,但苦于自带的QuickTime 无法录制内屏声音,一直使用的是第三方的app.近期开腾讯会议需要录屏,但主持人本身没有开启录屏权限,只好 ...

  8. 【c++ Prime 学习笔记】第6章 函数

    6.1 函数基础 函数定义包括:返回类型.函数名字.由0个或多个形参组成的列表以及函数体 通过调用运算符()来执行函数,它作用于一个表达式,该表达式是函数或函数指针.圆括号内是一个逗号隔开的实参列表, ...

  9. 力扣 - 剑指 Offer 53 - I. 在排序数组中查找数字 I

    题目 剑指 Offer 53 - I. 在排序数组中查找数字 I 思路1 一般来说,首先想到的是使用一个变量,从头开始遍历整个数组,记录target数组出现的次数,但是这样的时间复杂度是O(n),还是 ...

  10. BUAA_2020_软件工程_提问回顾与总结

    项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任建) 这个作业的要求在哪里 提问回顾与总结作业要求 我在这个课程的目标 了解软件工程的技术,掌握工程化开发的能力 这个作业在哪 ...