enter()
当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>柱状图</title> 6 </head> 7 <body> 8 9 <svg> 10 <rect></rect> 11 <rect></rect> 12 </svg> 13 <script src="d3.js"></script> 14 <script> 15 16 var dataset = [250, 210, 170, 130, 90]; //数据（表示矩形的宽度） 17 var rectHight = 25; 18 var svg = d3.select('svg'); 19 svg.attr('width', 300) 20 .attr('height', 300) 21 .attr('fill', 'red'); 22 var rect = svg.selectAll('rect'); 23 24 //绑定数据后，分别获取update和enter部分 25 var update = rect.data(dataset); 26 var enter = update.enter(); 27 28 //update部分的处理方法是直接修改内容 29 30 update.attr('x', 20) 31 .attr('y', function (d, i) { 32 return i * rectHight; 33 }) 34 .attr('width', function (d) { 35 return d; 36 }) 37 .attr('height', rectHight - 2); 38 39 //enter部分的处理方法是添加元素后再修改内容 40 enter.append('rect') 41 .attr('x', 20) 42 .attr('y', function (d, i) { 43 return i * rectHight; 44 }) 45 .attr('width', function (d) { 46 return d; 47 }) 48 .attr('height', rectHight - 2); 49 50 51 </script> 52 53 54 </body> 55 </html>
通常，从服务器读取文件后，数据是有的，但是网页中是没有元素的。这是D3一个很重要的特性，即可以选择一个空集，然后使用enter().append()的形式来插入元素。假设现在body里没有p元素，请看如下代码
1 var dataset = [10,20,30,40,50]; 2 var body = d3.select("body"); 3 body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集 4 .data(dataset) //绑定dataset数组 5 .enter() //返回enter部分 6 .append("p") //添加p元素 7 .text(function(d){ return d; });
exit()
与enter()相反，exit()是用来选择那些与数据相比多出来的DOM元素。
在下面例子中，我们多提供了一个DOM元素：
1 <body> 2 <p></p> 3 <p></p> 4 <p></p> 5 <p></p> 6 </body>
这回就容易理解了，因为是多出来的，那么就是实际存在的，即最后一个<p>。
多出来的话，我们可以接着用.remove()移除这些元素，代码如下：
1 d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();
exit的处理方法
有多出的元素，没有数据与之对应。对于这样的元素，通常的做法是使用remove()删除元素。假设body中有5个p元素，请看如下代码：
1 var dataset = [10, 20, 30]; 2 var p = d3.select("body").selectAll("p"); 3 //绑定数据之后，分别获取update部分和exit部分 4 var update = p.data(dataset); 5 var exit = update.exit(); 6 //update的部分的处理方法是修改内容 7 update.text( function(d){ return d; } ); 8 //exit部分的处理方法是删除 9 exit.remove();
这段代码中，对于exit部分的处理方法是删除。删除之后，网页中将不会有多余的p元素。