几个非常有用的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

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

 <html>
     <head>
     <title>D3 Axis Example</title>
     <script src="http://d3js.org/d3.v2.js"></script>
     </head>

     <body>
     <div id = "svgContainer"></div>
     <script>
         var svgContainer = d3.select("body")
                             .select("#svgContainer")
                             .append("svg")
                             .attr("width", 500)
                             .attr("height", 500);

         //data 1
         var dataArray1 = [4, 10, 20];
         var circle = svgContainer.selectAll("circle")
             .data(dataArray1);
         console.log("circle: ",circle);

         var circleEnter = circle.enter()//.append("circle");
         console.log("circleEnter",circleEnter);

         var circleEnterAppend = circle.enter().append("circle")
             .attr("cx", function(d,i){
                 return i*100 + 30;
             })
             .attr("cy", 200)
             .attr("r", function(d){
                 return d;
             })
             .attr("fill","steelblue");
         console.log("circleEnterAppend",circleEnterAppend);

         //data 2
         var dataArray2 = [20, 30, 40, 50];
         var circle2 = svgContainer.selectAll("circle")
             .data(dataArray2); //注意!这里没有加key function来区分哪个数据绑定到哪个元素,
                                //故[20, 30, 40]被默认按照顺序绑定到原来[4, 10, 20]对应的元素
         console.log("circle2: ",circle2);

         console.log("update: ", circle2.data());//the update set,原来数据和现在数据都有的部分

         //如果要改变原有的UI element的attribute,
         //可以在此处直接操作circle2 (因为circle2选定的是所有的原来的circle,而此时新加的数据50还没有被append一个DOM element)

         var circleEnter2 = circle2.enter()//包含的将是新增加的数据,即:50
         console.log("circleEnter2",circleEnter2);

         var circleEnterAppend2 = circleEnter2.append("circle")
                 .attr("cx",function(d,i){
                     return i*100 + 30;
                 })
                 .attr("cy", 200)
                 .attr("r",function(d){
                     return d;
                 })
                 .attr("fill","red");
          console.log("circleEnterAppend2",circleEnterAppend2);  

         //data 3
         var dataArray3 = [ 30, 40, 50];
         var circle3 = svgContainer.selectAll("circle")
             .data(dataArray3,function(d){ //注意! key function is added!
                 return d;
             });
         console.log("circle3: ",circle3);

         console.log("exit: ", circle3.exit()); //打印的将是没有绑定数据的DOM element,即:20对应的DOM element

         console.log("update: ", circle3.data());//the update set

         // circle3.exit()
         //     .transition()
         //     .duration(200)
         //     .remove();

     </script>

     </body>
 </html>

D3中数据与DOM element绑定之data() enter() exit()浅析的更多相关文章

  1. D3中动画(transition函数)的使用

    关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...

  2. jQuery数据缓存方案详解:$.data()的使用

    我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...

  3. 【 D3.js 入门系列 — 2 】 绑定数据和选择元素

    1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...

  4. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  5. AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

    1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...

  6. ASPxGridView中如何对主从表绑定数据

    注:在从表的aspxgridview中的(OnDataBinding()事件中绑定数据)-----代码如下 //绑定属性值表protected void grid2_sonTable_DataBind ...

  7. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  8. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  9. D3中selection之使用

    1. 极为重要的reference: [1] How selections works. http://bost.ocks.org/mike/selection/ [2] Nested selecti ...

随机推荐

  1. 菜鸟学Struts2——零配置(Convention )

    又是周末,继续Struts2的学习,之前学习了,Struts的原理,Actions以及Results,今天对对Struts的Convention Plugin进行学习,如下图: Struts Conv ...

  2. [Quartz笔记]玩转定时调度

    简介 Quartz是什么? Quartz是一个特性丰富的.开源的作业调度框架.它可以集成到任何Java应用. 使用它,你可以非常轻松的实现定时任务的调度执行. Quartz的应用场景 场景1:提醒和告 ...

  3. mysql5.6.23免安装配置

    1.官网下载,并解压 2.环境变量,path下,追加mysql的bin路径D:\Program Files\mysql\bin; 3.mysql目录下的my-default.ini重命名为my.ini ...

  4. django静态文件配置

    开发环境配置 需要下面几个步骤 1. 在app目录下创建static目录,将静态文件和相关文件夹放到此目录下,如your_app/static/img等 2. 确保settings.py中的INSTA ...

  5. HDU 1326 Box of Bricks(水~平均高度求最少移动砖)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1326 题目大意: 给n堵墙,每个墙的高度不同,求最少移动多少块转使得墙的的高度相同. 解题思路: 找到 ...

  6. 0525Scram项目6.0

    一.任务完成情况: 主界面基本完成,虽然界面看起来不是很美观,也比较简洁,但是这是我们一起商讨,各自找素材,找图片.还有一些动态的! 燃尽图: 二.界面演示: 三. 任务看板: 四.Spring1回顾 ...

  7. AX2012 referencegroup

    用referencegroup 1.添加EDT,refrecid 2.修改autoidentification 3. 可以直接拖refrecid字段出来,就是referencegroup了

  8. 评价软件_搜狗输入法(pc端)

    一.用户界面 用户在初次下载后,会有一个非常简洁的界面,如图:

  9. Python:异常处理

    Python 是面向对象的语言,所以程序抛出的异常也是类. 一.常见的异常类 NameError:尝试访问一个没有申明的变量 ZeroDivisionError:除数为 0 SyntaxError:语 ...

  10. 查询可用的Nuget服务地址

    解决访问Nuget源失败问题 查询IP址址 nslookup nuget.org 如失败,通过google 的dns服务器查询 nslookup nuget.org 8.8.8.8 将得到的Ip地址加 ...