用过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() |
