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

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

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

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

  2. D3中动画（transition函数）的使用

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

  3. d3.js:数据可视化利器之快速入门

    hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...

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

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

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

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

  6. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

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

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

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

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

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

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

随机推荐

  1. logback日志写入数据库(mysql)配置

    如题  建议将日志级别设置为ERROR.这样可以避免存储过多的数据到数据中. 1  logback 配置文件(如下) <?xml version="1.0" encoding ...

  2. 哪些问题是面试官经常问Java工程师的问题 ？ --- 转自quora

    Which are the frequently asked interview questions for Java Engineers ? Vivek Vermani, www.buggybrea ...

  3. GMOLO平板——如何安装新系统

    1.首先,此款平板采用intel处理器Z3735F,不支持Win7,XP,经过测试,Win8可以在此类笔记本及平板上运行,并非只能安装最新的Win10系统. 2.下载Win8 32位系统作为预备(GH ...

  4. netlink优势

    netlink相对其他应用进程和内核之间通信的方式(ioctrl或者系统文件等方式),全双工,可由内核发起,应用进程可用epoll监听,而其他方式只能由应用进程发起. 顺便记下隧道,隧道可以通过在ip ...

  5. 【IOS】模仿"抽屉新热榜"动态启动页YFSplashScreen

    IOS最好要设置系统默认启动页面,不然进入应用就会突然闪现黑色画面 下图是我们要实现的效果: 总体思路:设置一个系统默认启动页面,在进入didFinishLaunchingWithOptions时, ...

  6. R语言 批量规划求解

    昨天读到一个项目,是关于优化求解的. 约束条件如下: 公司里有很多客户,客户之所以不继续用我们的产品了,是因为他账户余额是负的,所以,为了重新赢回这些客户,公司决定发放优惠券cover掉客户账户的负余 ...

  7. 用.htaccess文件实现URL重写

    注:第一部分来自 http://www.cnblogs.com/wangkongming/archive/2012/11/13/2768251.html     这位博主的个人网站简洁   还有诗歌  ...

  8. 双向数据绑定（angular,vue）

    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...

  9. 2. K线学习知识二

    1. K线 - 阳线 定义:阳线是证券市场上指收盘价高于开盘价的K线,K线图中用红线标注表示涨势. A:小阳星 全日中股价波动很小,开盘价与收盘价极其接近,收盘价略高于开盘价. 小阳星的出现,表明行情 ...

  10. Erlang C1500K长连接推送服务-性能

    Whatsapp已经使用Erlang在生产环境跑到96GB内存单机 3M长连接,参加:WhatsApp的Erlang世界.毕竟业务级别能达到Whatsapp那样极少,现在只有千万级,单机太多挂一台影响 ...