Update、Enter、Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况。

一、什么是 Update、Enter、Exit

svg.selectAll("rect")   //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素

  这段代码使用的情况是当以下情况出现的时候:有数据,而没有足够图形元素的时候,使用此方法可以添加足够的元素。

  假设,在 body 中有三个 p 元素,有一数组 [3, 6, 9],则可以将数组中的每一项分别与一个 p 元素绑定在一起。

  但是,有一个问题:当数组的长度与元素数量不一致(数组长度 > 元素数量 or 数组长度 < 元素数量)时呢?这时候就需要理解 Update、Enter、Exit 的概念。

  如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择集上。可以想象,会有两个数据没有元素与之对应,这时候 D3 会建立两个空的元素与数据对应,这一部分就称为Enter

  而有元素与数据对应的部分称为 Update

  如果数组为 [3],则会有两个元素没有数据绑定,那么没有数据绑定的部分被称为 Exit。示意图如下所示。

  

二、Update 和 Enter 的使用

  当对应的元素不足时 ( 绑定数据数量 > 对应元素 ),需要添加元素(append)。

  现在 body 中有三个 p 元素,要绑定一个长度大于 3 的数组到 p 的选择集上,然后分别处理 update 和 enter 两部分。

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

//选择body中的p元素
var p = d3.select("body").selectAll("p"); //获取update部分
var update = p.data(dataset); //获取enter部分
var enter = update.enter(); //update部分的处理:更新属性值
update.text(function(d){
return "update " + d;
}); //enter部分的处理:添加元素后赋予属性值
enter.append("p")
.text(function(d){
return "enter " + d;
});

  结果如下图,update 部分和 enter 部分被绑定的数据很清晰地表示了出来。

   

  请大家记住:

    • update 部分的处理办法一般是:更新属性值
    • enter 部分的处理办法一般是:添加元素后,赋予属性值

三、Update 和 Exit 的使用

  当对应的元素过多时 ( 绑定数据数量 < 对应元素 ),需要删掉多余的元素。

  现在 body 中有三个 p 元素,要绑定一个长度小于 3 的数组到 p 的选择集上,然后分别处理 update 和 exit 两部分。

var dataset = [ 3 ];

//选择body中的p元素
var p = d3.select("body").selectAll("p"); //获取update部分
var update = p.data(dataset); //获取exit部分
var exit = update.exit(); //update部分的处理:更新属性值
update.text(function(d){
return "update " + d;
}); //exit部分的处理:修改p元素的属性
exit.text(function(d){
return "exit";
}); //exit部分的处理通常是删除元素
// exit.remove();

  结果如下,请大家区分好 update 部分和 exit 部分。这里为了表明哪一部分是 exit,并没有删除掉多余的元素,但实际上 exit 部分的绝大部分操作是删除。

  

  请大家记住:

    • exit 部分的处理办法一般是:删除元素(remove)

D3.js 理解 Update、Enter、Exit的更多相关文章

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

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

  2. D3.js:Update、Enter、Exit

    Update.Enter.Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况. 如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择 ...

  3. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  4. D3.js的v5版本入门教程(第四章)—— 理解Update、Enter、Exit

    D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...

  5. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

  6. 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

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

    理解Update.Enter.Exit 与 添加.删除元素 在使用data()绑定数据时,例如:现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定,但是,现 ...

  8. D3.js的基础部分之选择集的处理 enter和exit的处理方法 (v3版本)

    上一节给大家讲述额绑定数据的原理.当数组的长度与元素的数量不一致时,有enter部分和exit部分,前者表示存在多余的数据,后者表示存在多余的元素.本节将给大家介绍如何处理这些多余的东西,最后会给大家 ...

  9. 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

    在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...

随机推荐

  1. Ramsey theorem in Combinarotics

  2. Out of Hay

    Out of Hay Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13094 Accepted: 5078 Descripti ...

  3. texconv下载以及使用命令

    包含texconv.exe,测试图片和测试批处理文件 命令: texconv.exe -ft DDS .\src\*.bmp -o .\output\ 下载: http://files.cnblogs ...

  4. Uva 11584,划分成回文串

    题目链接:https://uva.onlinejudge.org/external/115/11584.pdf 题意: 一个字符串,将它划分一下,使得每个串都是回文串,求最少的回文串个数. 分析: d ...

  5. Radar之获取排列的UITexture数组

    1.定义UITexture二维数组 public UITexture[,] m_UITexture; 2.在 void start() 中分配内存 m_UITexture = , ]; 3.遍历排列的 ...

  6. File.separator

    摘自:http://blog.csdn.net/chindroid/article/details/7735832

  7. 在Struts2中配置Action

    在Struts2中配置Action <package>: 1.定义Action使用<package>标签下的<action>标签完成,一个<package&g ...

  8. 2016年2月18日 JAVA基础

    运行JAVA之前,必须将系统环境变量进行配置. 如果是32位的计算机安装的JDK版本必须是32位的,如果是64位的计算机安装的JDK版本必须是64位的,两者不可忽视,以免程序无法正常启动. 具体更改方 ...

  9. 浅思OC的语言特性

    算了算,学习IOS已经有一段时间了.今天花了点时间思考一下OC的语言特性,让自己的心不要那么浮躁,注重基础,回归本源. OC做为一门面向对象语言,自然具有面向对象的语言特性,如封装.继承.多态.他具有 ...

  10. 修改数据库表的schema,(表的[dbo.]前缀)

    数据库使用过程中遇到这种问题,请看下图