Question

Is there a way to access the event target (the DOM element) without using this? I’m inside an object and I want this to be bound to the object itself. The global d3.event doesn’t store the target apparently – d3.event.target doesn’t work. Any clue?

Edit: here is the code I’m running (it’s coffeescript):

@nodes = @svg.selectAll('g.node')
  .data(@nodes, (d) -> d.key)
  .enter()
  .append('g')
  .attr('class', 'node')
  .attr('transform', (d) => "translate(#{@x d.x},#{@y d.y})")
@nodes.append('svg:rect')
  .attr('width', @x 100)
  .attr('height', @y 50)

node_drag = d3.behavior.drag().origin(Object).on('drag', @drag_move)
@nodes.call node_drag


drag_move: (d, i) ->
  console.log d3.event.target

The browser console output is

function e(){this.on("mousedown.drag",t).on("touchstart.drag",t)} 

Same thing if I add a debugger statement and manually inspect the object. For some reason d3.event.target returns a function rather than the event object.

Answer 1

I can recreate this, and I’m tempted to think it should be logged as a bug – I don’t see any use in passing the drag control itself as d3.event.target.

Fixing seems to be easy in this case – just call the drag behavior on the rect selection instead:

@rect = @nodes.append('svg:rect')
  .attr('width', @x 100)
  .attr('height', @y 50)

node_drag = d3.behavior.drag().origin(Object).on('drag', @drag_move)
@rect.call node_drag

However, I could see this being quite annoying if you had multiple elements in your node group and wanted to understand which was being dragged.