d3.js--04(enter和exit)

enter()

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>柱状图</title>
 6 </head>
 7 <body>
 8
 9 <svg>
10     <rect></rect>
11     <rect></rect>
12 </svg>
13 <script src="d3.js"></script>
14 <script>
15
16     var dataset = [250, 210, 170, 130, 90];  //数据（表示矩形的宽度）
17     var rectHight = 25;
18     var svg = d3.select('svg');
19     svg.attr('width', 300)
20         .attr('height', 300)
21         .attr('fill', 'red');
22     var rect = svg.selectAll('rect');
23
24     //绑定数据后，分别获取update和enter部分
25     var update = rect.data(dataset);
26     var enter = update.enter();
27
28     //update部分的处理方法是直接修改内容
29
30     update.attr('x', 20)
31         .attr('y', function (d, i) {
32             return i * rectHight;
33         })
34         .attr('width', function (d) {
35             return d;
36         })
37         .attr('height', rectHight - 2);
38
39     //enter部分的处理方法是添加元素后再修改内容
40     enter.append('rect')
41         .attr('x', 20)
42         .attr('y', function (d, i) {
43             return i * rectHight;
44         })
45         .attr('width', function (d) {
46             return d;
47         })
48         .attr('height', rectHight - 2);
49
50
51 </script>
52
53
54 </body>
55 </html>

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

1 var dataset = [10,20,30,40,50];
2 var body = d3.select("body");
3 body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集
4  .data(dataset)  //绑定dataset数组
5  .enter()   //返回enter部分
6  .append("p")  //添加p元素
7  .text(function(d){ return d; });

exit()

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

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

1 <body>
2  <p></p>
3  <p></p>
4  <p></p>
5  <p></p>
6 </body>

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

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

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

exit的处理方法

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

1 var dataset = [10, 20, 30];
2  var p = d3.select("body").selectAll("p");
3 //绑定数据之后，分别获取update部分和exit部分
4  var update = p.data(dataset);
5  var exit = update.exit();
6 //update的部分的处理方法是修改内容
7  update.text( function(d){ return d; } );
8 //exit部分的处理方法是删除
9  exit.remove();

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

转载于:https://www.cnblogs.com/thelongmarch/p/6734406.html

d3.js--04(enter和exit)相关推荐

【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在前面几节中重复出现了例如以下代码: svg.selectAll ...
（补充）赶鸭子上架学D3.jsdataenter的（二）---data，datum，update，enter，exit基础概念（b站从零开始画图表学习笔记，感谢up主睿小狼）
绑定数据 D3.js常用的绑定数据的方法有两种 data和datum 从英文单词角度来说是data的附属和date的区别与共同点:都是绑定数据集,但是data是将数组中的每一个元素绑定到svg元 ...
d3代码如何改造成update结构（恰当处理enter和exit）
d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...
用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果注本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...
d3.js 教程模仿echarts柱状图
由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...
html树图制作,d3.js制作树结构图
一.运行效果说明:使用鼠标滚轮放大缩小,点解节点可以收缩打开子节点,按住鼠标左键拖动可移动整体图形. 二.实现过程 1.编写html和css结构 .node { ursor: pointer; } ...
js添加class_用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果注本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...
数据可视化利器D3.js教程 API
汇智网 http://xc.hubwiz.com/course/54fd40cfe564e50d50dcf284 D3.js 入门系列 - 选择元素和绑定数据 https://www.cnblogs. ...
D3.js in action 笔记
因为本书是英文版的,没有中文版,所以基本上这个笔记是为了代码留用,加之其代码格式和内容都比较简洁,然后又提出了很多问题,值得学习. 其中代码的位置:https://github.com/emeeks/ ...

d3.js--04(enter和exit)

d3.js--04(enter和exit)相关推荐

最新文章

热门文章