第一夜-enter与exit

d3.js在绑定数据后，一般会看到enter或exit两个函数。那它们到底是做什么用的呢？直接看一下代码和效果：

既然是JavaScript的框架，我们就用一个HTML文档作为测试的起点。

    
        
        
    
    
        
原始数据：1
        
原始数据：2
        
        
        
    

1 .当DOM中元素多于所绑定的数据个数时，使用enter配合append函数可以给文档添加缺少的元素。

var ds = [1, 2, 3, 4, 5];

var body = d3.select('body'); //选择body节点
body.selectAll('p')
        .data(ds)
        .enter()
        .append('p')
        .text(function(d) {
            return "数据：" + d;
        });

结果HTML为：

    
        
        
    
    
        
原始数据：1
        
原始数据：2
        
        
        
    

2 . exit函数配合remove则刚好相反，能够把多于数据集的部分从文档中移除。

var ds = [1];

var body = d3.select('body'); //选择body节点
body.selectAll('p')     //选择所有p标签
        .data(ds)       //绑定数据集
        .exit()     
        .remove();

结果HTML文档为：

    
        
        
    
    
        
原始数据：1