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