几个非常有用的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. POJ2417 Discrete Logging

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  2. spring mvc 深入学习

    参考文章: 第二章 Spring MVC入门 —— 跟开涛学SpringMVC Spring MVC 3.0 深入总结:http://blog.csdn.net/sunitjy/article/det ...

  3. oracle ORA-12514: TNS: no listener 解决方案

    服务端:oracle 11g 客户端: pl/sql 问题描述: 用客户端 pl/sql 连接登录的时候,提示 "ORA-12514: TNS: no listener". 在服务 ...

  4. AR 不同 继承映射的问题总结

    在使用AR(Nhibernate) 做ORM时,使用类的继承体系时,它有不同的映射方式,解决的问题不同,带来的问题差异也很大. 1.所有数据 存储在一张表,不同的类使用 DiscriminatorCo ...

  5. python学习笔记1-元类__metaclass__

    type 其实就是元类,type 是python 背后创建所有对象的元类   python 中的类的创建规则: 假设创建Foo 这个类 class Foo(Bar): def __init__(): ...

  6. db2 表授权语句

    grant insert/update/delete on table schema.table_name to user user_name;

  7. Vmware为Ubuntu安装VmTools

    From:http://www.cnblogs.com/killerlegend/p/3632443.html Author:KillerLegend 1:首先打开Vmware并运行里面的Ubuntu ...

  8. 部署ghost博客

    wget https://ghost.org/zip/ghost-0.6.4.zip npm install --production NODE_ENV=production npm start &g ...

  9. 从Decorator,Adapter模式看Java的IO库

    我想任何一本介绍模式的书在讲到Decorator模式的时候不能不提到它的实际应用--在Java/IO库里面的应用,<<Java与模式>>这本书也不例外,有点不一样的是,这本书在 ...

  10. Android 写文件到手机

    1)// 在手机中创建文件 FileOutputStream phone_outStream =this.openFileOutput("1.txt", Context.MODE_ ...