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的更多相关文章

  1. D3.js的v5版本入门教程（第九章）——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  2. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  3. D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  4. D3.js的v5版本入门教程（第十一章）——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  5. D3.js的v5版本入门教程（第八章）—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

  6. D3.js的v5版本入门教程（第七章）—— 比例尺的使用

    D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...

  7. D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  8. D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据

    D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...

  9. D3.js的v5版本入门教程（第十章）

    在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...

随机推荐

  1. 用jQuery的toggle方法实现元素的左右滑动隐藏

    通常情况下给元素加toggle方法通常会是上下滑动隐藏,而有时我们又需要左右滑动隐藏怎么办呢 $(document).ready(function(){ $('#example').click(fun ...

  2. python的常见内置模块之-----time

    1.time模块 a.时间戳:print(time.time())  从1970年到现在的时间,秒数 import time print(time.time()) >>>157448 ...

  3. Web开发之跨域问题

    最近在工作上遇到了跨域方面的问题,借此温习巩固. 跨域是受到浏览器的同源策略引起的,为了防止某些文档或脚本加载别的域下的未知内容造成泄露隐私,破坏系统等安全行为. 那什么是同源的呢? 同源是指:应用协 ...

  4. C#-阿里云OSSAPI

    Nuget导入包 共用类 using System; using System.Collections.Generic; using System.IO; using System.Linq; usi ...

  5. PCB Layout设计规范——PCB布线与布局

    1.PCB布线与布局隔离准则:强弱电流隔离.大小电压隔离,高低频率隔离.输入输出隔离,分界标准为相差一个数量级.隔离方法包括:空间远离.地线隔开.     2. 晶振要尽量靠近IC,且布线要较粗   ...

  6. Pthon面向对象-特殊属性

    Pthon面向对象-特殊属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   一.特殊属性 #!/usr/bin/env python #_*_conding:utf-8_*_ ...

  7. 聊聊ThreadLocal源码(基于JDK1.8)

    原文:https://cloud.tencent.com/developer/article/1333298 聊聊JDK源码中ThreadLocal的实现 主要方法: ThreadLocal的get方 ...

  8. 2019年牛客多校第一场 I题Points Division 线段树+DP

    题目链接 传送门 题意 给你\(n\)个点,每个点的坐标为\((x_i,y_i)\),有两个权值\(a_i,b_i\). 现在要你将它分成\(\mathbb{A},\mathbb{B}\)两部分,使得 ...

  9. selenium常用的API（五）获取title、刷新、前进和后退

    获取网页title的属性值 #encoding=utf-8 from selenium import webdriver import unittest import time class Visit ...

  10. C# CefSharp如何在Winforms应用程序中使用

    最近做了一个很小的功能,在网页上面打开应用程序,用vs的debug调试,可以正常打开应用程序,可布置到iis上面却无法运行应用程序,吾百度之,说是iis权限问题,吾依理做之,可怎么折腾也不行.最后bo ...