D3中数据与DOM element绑定之data() enter() exit()浅析

 

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

 

posted @ 2015-11-26 11:49  jiayouwyhit  阅读(402)  评论(0)  编辑  收藏  举报