【D3.js 学习总结】3、D3选择器-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

【D3.js 学习总结】3、D3选择器

简介: 用过kissy的都知道它的选择器有 `Node.one` 和 `Node.all` 两个,前一个是选择第一个结果,后一个是选择所有结果; D3的选择器跟kissy类似,只是名字换成了 `d3.select` 和 `d3.selectAll` ,应该比较好理解; 例如: 选中body标签 var body = d3.select('body'); 选中所有p标签

用过kissy的都知道它的选择器有 Node.oneNode.all 两个,前一个是选择第一个结果,后一个是选择所有结果;
D3的选择器跟kissy类似,只是名字换成了 d3.selectd3.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()

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: