选择集

select和selectAll类似jquery：

d3.select('body')    d3.select('.body')    d3.select('#body')    d3.selectAll('p')    d3.selectAll('.box')    var conent = document.getElementById('#box')    d3.select(conent)

操作选择集

查看状态

判断选择集是否为空：

selection.empty()

返回第一个选择集：

selection.node()

返回选择集的长度：

selection.size()

设定和获取

selection.attr(name,[ name])

设置或获取选择集的属性name是属性名称，value是属性值，省略value则返回属性值

selection.property(name,[ name])

使用方法一致，总之不能通过attr获取的属性，都可以考虑property

selection.classed(name,[ name])

name是类名， value是一个布尔值，表示是否开启

添加，插入和删除

在选择集的末尾插入元素：

selection.append()

在选择集的元素之前插入元素：

selection.inster()

删除选中的元素：

selection.remove()

数据绑定

d3.select和d3.selectAll返回元素的选择集，选择集上是没有数据的，数据绑定就是使选择的元素添加数据。相关的函数有两个

selection.datum()

和

selection.data()

datum的工作过程

datum的方法很简单，使用的也比较少。

var p = d3.select('.box').selectAll('p');    p.datum('这里是数据绑定').append('span').text(function(d, i){        return i + "<----> " + d;    });

datum绑定了一个字符串这里是数据绑定到选择集的子元素上。这一点很常用。

data()的工作过程

data能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，data同样能够处理。

    
        
     
        
     
        
     
        
     
        
     
        
     
        
     
        
     
        
     
        
     
    
    
        var p = d3.select('.box').selectAll('p');    var updateData = p.data([2,4,6])    updateData.text(function(d, i){        console.log(d)        return d;    })    updateData.enter().append('p').text(function(d, i){        console.log(d);        return d;    });    updateData.exit().remove();

多出的元素在最后renove。