javascript - d3 事件未触发

Question

我正在使用 D3 的弧形并附加了 D3 drag 处理程序来捕捉拖动运动。查看浏览器的调试器:

您可以看到生成的 Arc 的 path 确实在监听适当的事件，但从未触发回调，也没有向控制台报告 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);
  },

任何人都可以帮我弄清楚如何调试它或建议可能有什么问题吗？

Note: I am using d3 version 4, latest build as of today (30 May, 2016)

---

对于其他上下文，这里还有负责绘制路径的 Handlebars 模板:

<path
  d={{arc}}
  class='unselected'
  style="stroke: {{unselectedColor}}; fill: {{unselectedColor}};"
></path>

这里没有什么特别值得注意的，只是指出模板不会调用任何 native DOM 事件，并且“unselected”的类名在 DOM 中可用以供 d3 选择器找到它(它似乎有完成；因此 DOM 事件监听器出现在调试器中)。

---

我添加了该问题的在线演示:demo .拖动事件附加到类名为“unselected”的圆弧。您应该能够从该形状拖动并触发回调。

Answer 1

不可能有包含 pointer-events: none 的应用 css 样式？

如果你看一下这个 jsfiddle 示例，你会发现你不能拖动应用了 undraggable 类的圆圈，但它不会影响 chrome 检查器说元素正在监听的事件

.undraggable {
   pointer-events: none;
}

http://jsfiddle.net/2y2yqy55/1/