【D3.js|【D3.js 学习总结】21、D3交互事件
文章图片
前20节中,我们讲了各种静态D3图表的制作,好的图表应该是要与用户进行互动的,这节来讲讲D3的交互事件;
d3.event 【【D3.js|【D3.js 学习总结】21、D3交互事件】selection选择器事件监听的写法跟平时我们用的jQuery类似,如:
selection.on(‘click’,function(d,i){
alert(‘ok’);
})
但请注意,点击事件触发的匿名函数参数不是我们常用的e或event,而是绑定在选择器上的数据d和数据的序列号i,这点非常重要。
注册事件
我们只要调用全局对象
d3.event
,它是DOM事件,并实现了标准事件字段,像时间戳timeStamp和键代码keyCode,以及preventDefault()方法和的stopPropagation()方法。当然你可以使用原生事件的pageX and pageY;在后面的在线示例中我们是这样使用d3.event的
mouseenter: function(d,i) {
var e = d3.event;
var t = d3.select(this)
t.attr('fill','#000');
text1.text('当前圆半径:'+ d.r +'px');
}
注意:通过直接调用d.r可以取到当前选择器上绑定的半径数据;
给选择的元素重复注册事件监听,新的事件被替换之前注册的事件。为注册多个监听器,可以跟一个可选的命名空间,如“click.foo”和“click.bar”。
注销事件
要删除事件监听器,只需要传递null给listener,如示例中的如下代码:
click: function(d,i) {
var t = d3.select(this);
t.on('click',null).remove();
}
d3.mouse(container) 通过使用全局方法d3.mouse可以方便的获取到当前事件对象的x/y坐标值,container为原生DOM对象;
d3.behavior.drag 拖动行为,通过监听拖拽事件控制SVG的交互行为,以下代码出自最后面的示例;
// 创建拖动行为
var drag = d3.behavior.drag()
.on("drag", function(d,i) {
// 监听拖拽事件
var e = d3.event;
var t = d3.select(this)
t.attr({
cx: e.x,
cy: e.y
});
});
circle1.call(drag);
d3.behavior.zoom 缩放行为,通过监听缩放事件控制SVG的交互行为,以下代码出自最后面的示例;
// 创建缩放行为
var zoom = d3.behavior.zoom()
.on("zoom", function(){
// 监听缩放事件
circle2.attr('transform',"translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
});
circle2.call(zoom)
查看在线演示
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗()
- 2019-02-13——今天谈梦想()
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境,人生还很长