事件監(jiān)聽(tīng)
注:事件函數(shù)中的this對(duì)象是事件觸發(fā)的dom對(duì)象 d3.event的是事件的event對(duì)象
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);
// 該方法會(huì)綁定原生dom對(duì)象調(diào)用 所以this就是dom本身
// 函數(shù)傳入的兩個(gè)參數(shù)分別是綁定的數(shù)據(jù)的和角標(biāo)?
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 中會(huì)用到touch對(duì)象(觸摸點(diǎn))需要使用d3.touches(dom)來(lái)獲取觸摸點(diǎn)數(shù)組铸董。
注:關(guān)于d3.event對(duì)象使用如下
event
可以使用d3函數(shù)來(lái)獲取到事件相對(duì)svg頂點(diǎn)的坐標(biāo)
event
