几个非常有用的links:

[1] three little circles. http://bost.ocks.org/mike/circles/

[2] How selection works. http://bost.ocks.org/mike/selection/

[3] Thinking with join. http://bost.ocks.org/mike/join/

具体而言，data()是用来将DOM element与数据进行绑定起来，其第二个参数可以用来specify当前的每个数据元素绑定到哪个DOM element上；

enter()是用来指代在对数据进行更新后，相对原有的数据来说，新增加的还没有绑定DOM element的数据；

　　　　   exit()用来指代在对数据进行更新后，新数据中没有但是原来的数据中存在并且绑定了DOM element的数据 对应的DOM element。

如下是本人写的一个测试验证代码，可以直接运行查看打印结果进行分析，相关注释是对关键点的一些解释。

 1 <html>
 2     <head>
 3     <title>D3 Axis Example</title>
 4     <script src="http://d3js.org/d3.v2.js"></script>
 5     </head>
 6
 7     <body>
 8     <div id = "svgContainer"></div>
 9     <script>
10         var svgContainer = d3.select("body")
11                             .select("#svgContainer")
12                             .append("svg")
13                             .attr("width", 500)
14                             .attr("height", 500);
15
16         //data 1
17         var dataArray1 = [4, 10, 20];
18         var circle = svgContainer.selectAll("circle")
19             .data(dataArray1);
20         console.log("circle: ",circle);
21
22         var circleEnter = circle.enter()//.append("circle");
23         console.log("circleEnter",circleEnter);
24
25         var circleEnterAppend = circle.enter().append("circle")
26             .attr("cx", function(d,i){
27                 return i*100 + 30;
28             })
29             .attr("cy", 200)
30             .attr("r", function(d){
31                 return d;
32             })
33             .attr("fill","steelblue");
34         console.log("circleEnterAppend",circleEnterAppend);
35
36         //data 2
37         var dataArray2 = [20, 30, 40, 50];
38         var circle2 = svgContainer.selectAll("circle")
39             .data(dataArray2); //注意！这里没有加key function来区分哪个数据绑定到哪个元素，
40                                //故[20, 30, 40]被默认按照顺序绑定到原来[4, 10, 20]对应的元素
41         console.log("circle2: ",circle2);
42
43         console.log("update: ", circle2.data());//the update set,原来数据和现在数据都有的部分
44
45         //如果要改变原有的UI element的attribute,
46         //可以在此处直接操作circle2 (因为circle2选定的是所有的原来的circle，而此时新加的数据50还没有被append一个DOM element)
47
48         var circleEnter2 = circle2.enter()//包含的将是新增加的数据，即：50
49         console.log("circleEnter2",circleEnter2);
50
51         var circleEnterAppend2 = circleEnter2.append("circle")
52                 .attr("cx",function(d,i){
53                     return i*100 + 30;
54                 })
55                 .attr("cy", 200)
56                 .attr("r",function(d){
57                     return d;
58                 })
59                 .attr("fill","red");
60          console.log("circleEnterAppend2",circleEnterAppend2);
61
62         //data 3
63         var dataArray3 = [ 30, 40, 50];
64         var circle3 = svgContainer.selectAll("circle")
65             .data(dataArray3,function(d){ //注意！ key function is added!
66                 return d;
67             });
68         console.log("circle3: ",circle3);
69
70         console.log("exit: ", circle3.exit()); //打印的将是没有绑定数据的DOM element，即：20对应的DOM element
71
72         console.log("update: ", circle3.data());//the update set
73
74         // circle3.exit()
75         //     .transition()
76         //     .duration(200)
77         //     .remove();
78
79     </script>
80
81     </body>
82 </html>

View Code

转载于:https://www.cnblogs.com/jiayouwyhit/p/4997254.html

D3中数据与DOM element绑定之data() enter() exit()浅析相关推荐

  1. 对ajax中数据的得到以及绑定的认识

    1.将后台得到的数据绑定到datagrid为例: 第一种是: 后台得到的数据直接绑定到datagrid上面,如下图: 这样操作的好处在于可以使界面比较简洁. 第二种是将得到的数据作为参数的形式绑定到d ...

  2. EngJS(超轻量) 中数据双向绑定如何使用

    Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系 和  事件关系 两种 . 前者操作数据时 ,后者触发事件时. 下面简单 的介绍Eng 中 的 w ...

  3. 理解D3中的数据连接(data join)和选取(selection)是怎么工作的

    了解过D3的同学,对下边的这张图片想必都很熟悉 D3是data-diven-document的意思,那么到底什么是数据驱动文档呢?D3是怎样把数据跟dom元素连接到一起的? 一般是分为三步: sele ...

  4. 怎么保证SD卡中的数据与物理SD卡绑定 防止SD卡中数据被复制到电脑上

    转载请标明是引用于 http://blog.csdn.net/chenyujing1234 欢迎大家拍砖 一.应用背景 SD卡中存有我们的导入数据文件data.bat,SD卡要插入到WinCE系统,为 ...

  5. react 数据可视化_使用d3创建数据可视化并在2020年做出React

    react 数据可视化 Data visualisation and application technologies have evolved greatly over the past decad ...

  6. 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue...

    原文:背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue [源码下载] 背水一战 ...

  7. JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  8. 《D3.js数据可视化实战手册》—— 1.1 简介

    本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第1章,第1.1节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...

  9. Vue学习笔记入门篇——数据及DOM

    本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...

最新文章

  1. jupyter qtconsole 配置文件的生成和修改
  2. 【Windows10nbsp;IoT开发系列】“Hello，World！”指导
  3. 基于SSM+Layui+Bootstrap实现学校教师技能大赛评分系统
  4. Intellij idea generate builder 插件－用于自动生成builder模式代码
  5. App架构设计经验谈:展示层的设计
  6. AAAI 2021 | 关键词指导的神经对话模型
  7. 【华为云技术分享】DAS文件上传组件的进化
  8. 《zabbix中文支持》-4
  9. 增加限制模拟器2006-2-11
  10. 【Android群英传】学习笔记（三·一）
  11. 苹方字体 android,iOS 9“苹方”字体像安卓被吐槽
  12. 台式机设成仅计算机,如何把台式电脑设置成wifi热点
  13. python建模_python建模实例详解
  14. linux zip 删除源文件,linux zip命令参数及用法详解--linux压缩zip文件命令
  15. 如何使用Python查找文本文件的Zipf分布
  16. 图像CMYK模式转RGB模式
  17. office2016激活后仍然出现输入激活码
  18. github中clone代码到本地与直接下载压缩包的区别
  19. Vue：如何制作表格数据分页查询
  20. 基于UE4/Unity绘制地图 - 确定展示区域

热门文章

  1. 疯狂为《英伟达深度学习学院半日免费初级课程》打Call
  2. 旅游景点人流量代码php,用 PHP 爬虫做旅游数据分析
  3. python标准库sys_Python——标准库 Sys模块
  4. visio防火墙可以连接什么_Visio类似的高性价比的替代软件
  5. 客户组网服务案列_山西seo关键词排名优化案列
  6. linux给ftp账号分配sftp权限,Linux设置用户通过SFTP访问目录的权限教程
  7. PHP获取input中的值相同报错,laravel单元测试之phpUnit中old()函数报错解决_php实例...
  8. VMware虚拟化/云计算
  9. php千封邮件怎么快速发送,如何在PHP中无限制地发送数千封电子邮件？
  10. Java分布式唯一ID生成方案——比UUID效率更高的生成id工具类