D3 - see what is in a specific position x, y

Question

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

For this, my idea is that I check which element is 50 pixels to the left. Is there any way to see what is at a specific x, y position in d3? I tried to check this during 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 that you basically have a collision / intersection detection problem. And, as mentioned in the links posted above, there seems to be incorrect browser support for a reliable way to do this in SVG or D3.

However, in your tree example, the way (Technique 1 of this answer ) to get around this is to draw large transparent circles around the same x, y coordinates as the nodes. You can then detect the mouse cursor events on them and draw a temporary connector to show the user.

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

The key section is to draw a larger, transparent node, and then detect 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 the logic around dragging and tracking the source / target when everything moves.

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