事件监听
注:事件函数中的this对象是事件触发的dom对象 d3.event的是事件的event对象
svg.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr("height", 30)
.attr("x", padding.left)
.attr("y", function (d, i) {
return i * 50 + padding.top;
})
.attr("fill", "purple")
.attr("width", 0)
.on("mouseover", function (d, i) {
console.log(d3.event);
// 该方法会绑定原生dom对象调用 所以this就是dom本身
// 函数传入的两个参数分别是绑定的数据的和角标¬
console.log(this);
d3.select(this).transition().duration(1000).ease("out")
.attr("fill", "gray")
}).on("mouseleave", function (d, i) {
d3.select(this).transition().duration(1000).ease("out")
.attr("fill", "purple")
})
.transition().duration(1000).ease("bounce")
.attr("width", function (d) {
return d;
});
触屏交互
在触屏交互中，例如touchstart touchmove touchend 中会用到touch对象(触摸点)需要使用d3.touches(dom)来获取触摸点数组。
注:关于d3.event对象使用如下
event
可以使用d3函数来获取到事件相对svg顶点的坐标
event
