d3 - see what is at a particular x,y position

Question

I am trying to implement some drag drop functionality in a d3 tree where when a node is being dragged if it is 50 pixels directly to the left of a node I would like to draw a dotted connector to indicate that if you release the node should be moved as a child here.

In order to do this my idea is that i check what element is 50 pixels to the left. Is there a way to see what is at a particular x,y position in d3? What i tried was checking this during the dragmove.

document.elementFromPoint(d3.event.x, d3.event.y);

However, this only returns the svg element. Is there a similar way in d3 or any other ideas?

-Tim

Answer 1

I think you basically have a collision/intersection detection problem to solve. And as mentioned in the links I posted above, there seems to be inconsistent browser support for a reliable way of doing this in SVG or D3.

However, in your tree example, a way (Technique 1 from this answer) to get around this is to draw larger transparent circles around the same x,y coordinates as the nodes. Then you can detect mouseover events on these and draw your temporary connector to show the user.

I have a working example of this here: http://bl.ocks.org/explunit/5603250

The key section is drawing the larger transparent node and then detecting mouseover events on it:

  node.append("circle")
    .attr("r", 60)
    .attr("opacity", 0.0) // change this to non-zero to see the target area
    .on("mouseover", overCircle)
    .on("mouseout", outCircle)

The rest of the code is just logic around dragging and keeping track of source/target as things move around.

I'm not sure this is much better than Technique 2 from this answer, but your question made me curious to try out this approach.