d3.select
2015-11-04 11:21
537 查看
d3虽然是一个很强大的js库,但是作为初学者并且只是为了一个临时项目才用它的人来说,深入研究它并没有什么必要。我目前只是采用了它的比较强大的selection以及部分函数功能,实际上这部分功能利用DOM的方法也能做到,只是比较烦琐一些。
但是d3也有一些不方便的地方,可能也是我学的比较深入的缘故,比方说我们都习惯用下面这个方法选中指定的标签
d3.select("g#g123")
但是如果我们需要选中一个动态创建的g对象或者是循环选中几十个怎么办?d3提供了select(function(){})这样的形式,但是这样的形式非常的不直观也不好理解,于是当我们可以这么做
d3.select("g#"+x.getAttribute("id"))
实际上,d3的select功能就是DOM的getElementById,只不过一个选中的是selection,另外选中的是node。selection的话,可以应用的d3函数就比较多,例如.on(), .call(), 等等
下面在举一个例子,比方说你导入了一个SVG文件,并且创建了多个副本,每个副本利用x.setAttribute设置了其id,现在我们需要利用d3的on功能,实现mouseover和mouseout功能
首先自然是创建多个mouseover功能,即svgButton.on("mouseover",function(){})
然后在function里面,指定鼠标移上去的效果,但是此时如何得到当前鼠标移动到的实例对象呢?我们可以用下面的方法非常简单
d3.select("#"+this.id).select("g#g3021").style("fill-opacity","1").style("cursor","hand");
调试可以知道,this会返回当前鼠标移上去的对象object,但是它是一个SVG object,既不能用d3的函数,也不能用DOM的方法,但是this.id会返回这个SVG OBJECT的ID,因为Id在创建的实例的时候,已经被设置过了,因此这里就非常方便了
如果不利用DOM的函数,那么多个实例的mouseover功能用D3的函数拼凑就会非常烦琐
但是d3也有一些不方便的地方,可能也是我学的比较深入的缘故,比方说我们都习惯用下面这个方法选中指定的标签
d3.select("g#g123")
但是如果我们需要选中一个动态创建的g对象或者是循环选中几十个怎么办?d3提供了select(function(){})这样的形式,但是这样的形式非常的不直观也不好理解,于是当我们可以这么做
d3.select("g#"+x.getAttribute("id"))
实际上,d3的select功能就是DOM的getElementById,只不过一个选中的是selection,另外选中的是node。selection的话,可以应用的d3函数就比较多,例如.on(), .call(), 等等
下面在举一个例子,比方说你导入了一个SVG文件,并且创建了多个副本,每个副本利用x.setAttribute设置了其id,现在我们需要利用d3的on功能,实现mouseover和mouseout功能
首先自然是创建多个mouseover功能,即svgButton.on("mouseover",function(){})
然后在function里面,指定鼠标移上去的效果,但是此时如何得到当前鼠标移动到的实例对象呢?我们可以用下面的方法非常简单
d3.select("#"+this.id).select("g#g3021").style("fill-opacity","1").style("cursor","hand");
调试可以知道,this会返回当前鼠标移上去的对象object,但是它是一个SVG object,既不能用d3的函数,也不能用DOM的方法,但是this.id会返回这个SVG OBJECT的ID,因为Id在创建的实例的时候,已经被设置过了,因此这里就非常方便了
如果不利用DOM的函数,那么多个实例的mouseover功能用D3的函数拼凑就会非常烦琐
相关文章推荐
- JavaScript可视化图表库D3.js API中文参考
- D3.js中data(), enter() 和 exit()的问题详解
- 奇虎360-数据可视化
- d3.js学习笔记(一)
- d3.js学习笔记(二) 柱形图
- D3.JS坐标轴的使用
- [D3.js] SVG-Axes(坐标轴)
- 【 D3.js 入门系列 — 5 】 坐标轴
- D3.js学习笔记(三)——创建基于数据的SVG元素
- D3.js学习笔记(二)——使用绑定在DOM上的数据
- D3.js学习笔记(一)——DOM上的数据绑定
- 牛逼的js--就是d3.js
- D3.JS实例,旋转的色彩方块
- 【D3.js数据可视化系列教程】--(一)简介
- 【D3.js数据可视化系列教程】--(二)最简单的开始:添加元素
- 【D3.js数据可视化系列教程】--(三)数据绑定
- 【D3.js数据可视化系列教程】--(四)使用数据
- 【D3.js数据可视化系列教程】--(五)用层画条形图
- 【D3.js数据可视化系列教程】--(六)生成测试数据
- 【D3.js数据可视化系列教程】--(七)SVG初探