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的函数拼凑就会非常烦琐