d3 Events not triggering

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=
  class='unselected'
  style="stroke: ; fill: ;"
></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).