几个非常有用的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. 对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. [HttpPost]和[AcceptVerbs(HttpVerbs.Post)]区别

    1.共同点:[HttpPost]和[AcceptVerbs(HttpVerbs.Post)]都是只接受POST请求过来的数据. 2.不同点:在MVC中如果想一个action既可以回应POST请求也可以 ...

  2. ump_player在线直播播放器

      ump_player在线直播播放器封装,可以支持加载在线直播流 https://github.com/Mrxdh/EveryExercise/blob/master/ump_player%E5%9 ...

  3. scrapy 学习笔记

    1.scrapy 配合 selenium.phantomJS 抓取动态页面, 单纯的selemium 加 Firefox浏览器就可以抓取动态页面了, 但开启窗口太耗资源,而且一般服务器的linux 没 ...

  4. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  5. zepto之tap事件点透问题分析及解决方案

    点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...

  6. 微信小程序技术分析：Mustache语法要点总结

    小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户 ...

  7. Markdown简单语法

    Content 标题大小 斜体和加粗 分割线 有序列表和无序列表 链接 代码框 标题大小 在字体下方加上-和=分别表示一级标题和二级标题,例如: 一级标题 --- 二级标题 === 或者使用#的个数表 ...

  8. Ubuntu14.04源

    Ubuntu14.04源:   来源: http://wiki.ubuntu.org.cn/Qref/Source (包含15.04.14.10.14.04.12.04.10.04的源)     Ub ...

  9. WPF获取应用程序启动目录的方法

    1.AppDomain.CurrentDomain.BaseDirectory using System; namespace ConsoleApplication1 { class Program ...

  10. zabbix触发器依赖

    触发器依赖 Zabbix - Router1 - Router2 – Host 如果router1宕机了,那么router2和host都不能连上,这样的话就会发router1.router2和host ...