d3.select


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.js
个人分类: d3.js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭