d3-查看特定的x，y位置 [英] d3 - see what is at a particular x,y position

问题描述

我正在尝试在d3树中实现一些拖放功能，其中在拖动节点时，如果它直接位于节点左侧50像素处，我想绘制一个虚线连接器以指示是否释放该节点应在此处作为孩子移动.

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.

为了执行此操作，我的想法是检查左边50像素是哪个元素.有没有办法查看d3中特定x，y位置的内容?我试过的是在拖动时检查这一点.

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

但是，这仅返回svg元素. d3或其他任何想法中有类似的方法吗?

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

-蒂姆

推荐答案

我认为您基本上有一个要解决的碰撞/交叉口检测问题.就像我在上面发布的链接中提到的那样，似乎没有一致的浏览器支持，无法在SVG或D3中执行此操作.

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.

但是，在您的树形示例中，一种绕过此问题的方法(来自此答案的技术1)是一种绘制方法与节点相同的x，y坐标周围的较大的透明圆.然后，您可以检测到这些鼠标悬停事件并绘制临时连接器以显示给用户.

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.

我在这里有一个可行的例子: http://bl.ocks.org/explunit/5603250

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.

我不确定这是否比此答案中的技术2好得多，但是您的问题让我感到好奇尝试这种方法.

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.

这篇关于d3-查看特定的x，y位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！