D3 笔记六:Update、Enter、Exit
来源:互联网 发布:c 面向对象编程 编辑:程序博客网 时间:2024/05/17 18:47
什么是 Update、Enter、Exit
如果数组为
[3, 6, 9, 12, 15]
,将此数组绑定到三个 p 元素的选择集上。可以想象,会有两个数据没有元素与之对应,这时候 D3 会建立两个空的元素与数据对应,这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为[3]
,则会有两个元素没有数据绑定,那么没有数据绑定的部分被称为 Exit。示意图如下所示:如此,便可以很好的理解之前笔记中出现的下面代码了:
svg.selectAll("rect") // 选择svg内所有的矩形,数量为0 .data(dataset) // 将数组与元素数量为0的选择集绑定 .enter() // 选择选择集的enter部分 .append("rect") // 添加足够数量的矩形元素
语法与一般用法
如何获取这个三个不同部分的获取呢?请看下面的代码:
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();//获取exit部分var exit = update.exit();
再获取到这三个部分后的一般做法是:
- update 部分:一般用于更新属性值;
- enter 部分:一般先添加元素后,再赋予属性值;
- exit 部分:一般直接删除这个部分的元素——
remove()
。
阅读全文
0 0
- D3 笔记六:Update、Enter、Exit
- d3.js update enter exit
- D3学习之update、enter、exit
- d3.js——update、enter、exit
- D3.js——理解 update, enter, exit 的使用
- 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
- 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
- D3.js学习04_enter,update,exit
- d3选择集合核心方法(一):data、enter、exit
- 【d3.js 学习---01】 理解 append() exit() enter()
- 理解update-enter-exit三个函数的用法
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
- d3js enter/exit深入了解
- Trace Function Enter, Exit and Leave
- Page-Enter、Page-Exit的使用
- Page-Enter、Page-Exit的使用
- Trace Function Enter, Exit and Leave
- 理解D3js中的enter,exit方法
- LTE之3GPP_协议下载_协议命名
- Android杂谈--打开文件的Intent及使用
- ContentProvider 内容提供者
- HttpURLConnection ----GET请求 和 POST请求:
- 数据库sql语句练习题
- D3 笔记六:Update、Enter、Exit
- Redis入门及在商城案例中的使用
- 使用shell 脚本实现 希尔排序
- linux睡眠和唤醒的一个例子
- leetCode 1. Two Sum
- python logging的使用
- 小白笔记-----------------------------leetcode53. Maximum Subarray
- IO重定向
- Uncowed Forces