[英]d3 Events not triggering
我正在使用D3的弧形并附加了D3 drag
处理器来捕捉拖动。 查看浏览器的调试器:
您可以看到生成的Arc的路径确实正在侦听相应的事件,但回调从未被触发,并且没有向控制台报告JS错误。
用于添加处理程序(以及回调)的代码在这里。 对于那些熟悉Ember的人来说,很棒,对于你们这些人我并没有尝试只显示相关的JS部分。
import { drag } from 'd3-drag';
import { arc } from 'd3-shape';
import { select } from 'd3-selection';
const uiArc = Ember.Component.extend({
layout,
tagName: '',
init() {
this._super(...arguments);
Ember.run.schedule('afterRender', () => {
this.svg = document.getElementById(this.elementId);
this.addDragListeners(`#${this.elementId} .unselected`);
});
},
addDragListeners(target) {
drag.container = this;
select(target).call(drag().on('start', this._dragStart));
select(target).call(drag().on('drag', this._dragging));
select(target).call(drag().on('end', this._dragEnd));
},
_dragStart(e) {
console.log('drag starting', e);
},
_dragging(e) {
console.log('dragging', e);
},
_dragEnd(e) {
console.log('drag ending', e);
},
任何人都可以帮我弄清楚如何调试或建议可能出错的地方?
注意:我使用的是d3版本4,截至今日(2016年5月30日)的最新版本
对于其他上下文,负责绘制路径的Handlebars模板也是:
<path
d={{arc}}
class='unselected'
style="stroke: {{unselectedColor}}; fill: {{unselectedColor}};"
></path>
这里没有什么值得注意的,只是要指出模板不会调用任何本机DOM事件,并且在DOM中可以使用“未选择”的类名来让d3选择器找到它(它似乎已经完成了;因此在调试器中显示的DOM事件侦听器)。
我已经添加了一个问题的在线演示: demo 。 拖动事件附加到弧,类名为“未选中”。 您应该可以从该形状拖动并触发回调。
没有可能存在包含pointer-events: none
的应用css样式pointer-events: none
?
如果您看一下这个jsfiddle示例,您将看到无法拖动应用了类undraggable的圆圈,但它不会影响chrome检查器所说的元素正在侦听的事件
.undraggable {
pointer-events: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.