enter()

当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>柱状图</title>

 </head>

 <body>

 <svg>

     <rect></rect>

     <rect></rect>

 </svg>

 <script src="d3.js"></script>

 <script>

     var dataset = [250, 210, 170, 130, 90];  //数据（表示矩形的宽度）

     var rectHight = 25;

     var svg = d3.select('svg');

     svg.attr('width', 300)

         .attr('height', 300)

         .attr('fill', 'red');

     var rect = svg.selectAll('rect');

     //绑定数据后，分别获取update和enter部分

     var update = rect.data(dataset);

     var enter = update.enter();

     //update部分的处理方法是直接修改内容

     update.attr('x', 20)

         .attr('y', function (d, i) {

             return i * rectHight;

         })

         .attr('width', function (d) {

             return d;

         })

         .attr('height', rectHight - 2);

     //enter部分的处理方法是添加元素后再修改内容

     enter.append('rect')

         .attr('x', 20)

         .attr('y', function (d, i) {

             return i * rectHight;

         })

         .attr('width', function (d) {

             return d;

         })

         .attr('height', rectHight - 2);

 </script>

 </body>

 </html>

通常，从服务器读取文件后，数据是有的，但是网页中是没有元素的。这是D3一个很重要的特性，即可以选择一个空集，然后使用enter().append()的形式来插入元素。假设现在body里没有p元素，请看如下代码

 var dataset = [10,20,30,40,50];

 var body = d3.select("body");

 body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集

  .data(dataset)  //绑定dataset数组

  .enter()   //返回enter部分

  .append("p")  //添加p元素

  .text(function(d){ return d; });

exit()

与enter()相反，exit()是用来选择那些与数据相比多出来的DOM元素。

在下面例子中，我们多提供了一个DOM元素：

 <body>

  <p></p>

  <p></p>

  <p></p>

  <p></p>

 </body>

这回就容易理解了，因为是多出来的，那么就是实际存在的，即最后一个<p>。

多出来的话，我们可以接着用.remove()移除这些元素，代码如下：

 d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

exit的处理方法

有多出的元素，没有数据与之对应。对于这样的元素，通常的做法是使用remove()删除元素。假设body中有5个p元素，请看如下代码：

 var dataset = [10, 20, 30];

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

 //绑定数据之后，分别获取update部分和exit部分

  var update = p.data(dataset);

  var exit = update.exit();

 //update的部分的处理方法是修改内容

  update.text( function(d){ return d; } );

 //exit部分的处理方法是删除

  exit.remove();

这段代码中，对于exit部分的处理方法是删除。删除之后，网页中将不会有多余的p元素。

d3.js--04(enter和exit)的更多相关文章

  1. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

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

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

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

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

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

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

  5. D3.js 理解 Update、Enter、Exit

    Update.Enter.Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况. 一.什么是 Update.Enter.Exit svg.selectAll(&qu ...

  6. D3.js：Update、Enter、Exit

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

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

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

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

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

  9. d3代码如何改造成update结构（恰当处理enter和exit）

    d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...

随机推荐

  1. [Xcode 实际操作]五、使用表格-(8)自定义UITableView单元格Accessory样式(附件图标)

    目录:[Swift]Xcode实际操作 本文将演示如何自定义单元格的附件图标. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添 ...

  2. JAVA之动态编译

    通过Java动态生成class文件 今天说下JAVA中的动态编译,这个功能根据我现在的了解好像没有见到过用的,我Jio的吧,现在的一些在线代码编缉器可以用到了,这个具体我也不是很清楚.感兴趣的大家可以 ...

  3. wampserver2.5局域网公网IP访问配置

    wampserver2.5集成环境的安装和使用就不多说了,网上有很多教材.安装好后找到apache的配置文件httpd.conf.默认位置是: swap安装目录\wamp\bin\apache\apa ...

  4. [转] iOS开发-搜索栏UISearchBar和UISearchController

    原文网址: http://www.cnblogs.com/xiaofeixiang/p/4273620.html?utm_source=tuicool iOS中UISearchDisplayContr ...

  5. QCTF 2018线上赛 writeup

    本次算是被QCTF打趴了,本来做题时间就少(公司无限开会,开了一天,伪借口),加上难度和脑洞的增大,导致这次QCTF又酱油了...就连最基本的签到题都没做出来...这就很气 好了,以下是解题思路 MI ...

  6. NET Core 2.0使用Cookie认证实现SSO单点登录

    NET Core 2.0使用Cookie认证实现SSO单点登录 之前写了一个使用ASP.NET MVC实现SSO登录的Demo,https://github.com/bidianqing/SSO.Sa ...

  7. ListView 视图（View）

    自定义视图,设置默认ListView,ListViewItems默认样式 public class VirtualStackPanelView : ViewBase { public static r ...

  8. JAVA基础之Map接口

    个人理解: 个人感觉Map接口以后会经常用到,可以很清晰地查找某个对象,要熟悉其四种遍历方法.特别注意其键值对的键不能是重复的,有想定义有序存取的话,可以使用LinkedHashMap集合.不过定义自 ...

  9. Java基础（Java概述、环境变量、注释、关键字、标识符、常量）

    第1天 Java基础语法 今日内容介绍 u Java开发环境搭建 u HelloWorld案例 u 注释.关键字.标识符 u 数据(数据类型.常量) 第1章 Java开发环境搭建 1.1 Java概述 ...

  10. vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~ ...