d3 - 查看特定x、y位置的内容

Question

我想在d3树中实现一些拖放功能，当节点被拖动时，如果它恰好位于另一个节点左侧50像素处，我希望绘制虚线连接器，以指示如果您释放该节点，它将作为子节点移动到此处。

为了实现这一点，我的想法是检查左侧50像素处的元素。是否有一种方法可以在d3中查看特定x、y位置上的元素？我尝试在拖动过程中进行检查。

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

然而，这只返回svg元素。在d3中是否有类似的方法或其他想法？-Tim

- Tim

---

可能相关的内容：这个，这个，以及这个。 - explunit

Answer 1

我认为您基本上需要解决一个碰撞/交叉检测问题。正如我在上面发布的链接中提到的，似乎没有一种可靠的方式来在SVG或D3中进行此操作，因此存在不一致的浏览器支持。

然而，在您的树形示例中，有一种方法（来自这个答案的技巧1）可以绕过这个问题，即在与节点相同的x、y坐标处绘制较大的透明圆圈。然后，您可以在这些圆圈上检测mouseover事件，并绘制临时连接器以向用户显示。

我在这里有一个可行的示例：http://bl.ocks.org/explunit/5603250 关键部分是绘制较大的透明节点，然后检测它们上面的mouseover事件。

  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)

代码的其余部分只是关于拖拽和跟踪源/目标随着事物移动而发生的逻辑。

我不确定这是否比此答案中的技术2好，但您的问题让我很好奇，想尝试一下这种方法。

- explunit