d3事件未触发

Question

I'm using D3's arc shape and have attached the D3 drag handler to catch drag movement. Looking at the browser's debugger:

You can see that the resulting Arc's path is indeed listening for the appropriate events and yet the callbacks are never fired and no JS errors are reported to the console.

The code used to add the handlers (as well as the callbacks) are here. For those of you familiar with Ember, great, for those of you not I've tried to only show the relevant JS parts.

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);
  },

Can anyone help me figure out how to debug this or suggest what might be wrong?

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

---

For additional context, here too is the Handlebars template responsible for drawing the path:

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

Nothing very remarkable here, it's just to point out that the template does not invoke any native DOM events and that the class name of "unselected" is available in the DOM for the d3 selector to find it (which it appears to have done; hence the DOM event listeners showing up in debugger).

---

I've added an online demo of the problem: demo . The drag event is attached to the arc with classname 'unselected'. You should be able to drag from that shape and have the callbacks fire.

Answer 1

There's no possibility there's an applied css style that includes pointer-events: none ?

IF you look at this jsfiddle example you'll see you can't drag the circles with the class undraggable applied, but it doesn't affect the events the chrome inspector says the elements are listening to

.undraggable {
   pointer-events: none;
}

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