【D3.js 学习总结】3、D3选择器-白红宇

用过kissy的都知道它的选择器有 Node.one 和 Node.all 两个，前一个是选择第一个结果，后一个是选择所有结果；

D3的选择器跟kissy类似，只是名字换成了 d3.select 和 d3.selectAll ，应该比较好理解；

例如：

选中body标签

var body = d3.select('body');

选中所有p标签

var p = d3.selectAll('p');

不一样的地方在于转换为原生dom时，Kissy是 Node.all('body')[0] 而D3是 d3.selectAll('body')[0][0]

D3选择器还有以下这些方法帮助我们对节点或数据做一些操作

方法名	含义	示例
selection.append	创建并追加一个新元素	p.append('span')
selection.attr	取得或设置属性的值	p.attr('class','demo')
selection.call	为当前选择调用一个函数	p.call(function(d){d.text('demo')})
selection.classed	添加或移除CSS类	p.classed('demo',true)
selection.data	为一组元素分别取得或设置数据	p.data([1,2,3],function(d){return d;})
selection.datum	为单个元素取得或设置数据	p.datum(1)
selection.each	为每个选中的元素调用一个函数	p.data([1,2,3]).each(function(d,i){console.log(d)})
selection.empty	如果选择是空则返回true	console.log(p.empty())
selection.enter	为缺失的元素返回占位符	p.enter()
selection.exit	返回不再需要的元素	p.exit()
selection.filter	基于数据过滤选择	p.data([1,2,3]).filter(function(d,i){return d%2 == 0})
selection.html	取得或设置innerHTML内容	p.html('1 2')
selection.insert	在已存在元素之前创建并插入一个元素	p.insert('span')
selection.interrupt	如果有过渡的话，立即中断当前的过渡	p.interrupt()
selection.node	返回选择中的第一个节点	p.node().innerHTML = 'demo'
selection.on	为交互添加或移除事件监听器	p.on('click',function(d){console.log(d)})
selection.order	重排列文档中的元素，以匹配选择	var div = d3.select("body").selectAll("div") .data(["a", "b", "f"]); div.enter().append("div") .text(String); var div = d3.select("body").selectAll("div") .data(["a", "b", "c", "d", "e", "f"], String); div.enter().append("div") .text(String); div.order();
selection.property	取得或设置行内属性	d3.select('input').property('checked')
selection.remove	从当前文档中移除当前元素	p.remove()
selection.select	为每个选中元素的在选择一个后代元素	p.select('span')
selection.selectAll	为每个选中元素的在选择多个后代元素	p.selectAll('span)
selection.size	返回选择中的元素数	p.size()
selection.sort	基于数据排列文档中的元素	p.data([1,3,2]).sort(function (a,b) {return a>b;})
selection.style	取得或设置样式属性	p.style('width','100px')
selection.text	取得或设置文本内容	p.text('demo')
selection.transition	在选中元素上开启过渡	p.transition()