d3.js - d3 - 查看特定 x,y 位置的内容

Question

我正在尝试在 d3 树中实现一些拖放功能，当一个节点被拖动时，如果它直接位于节点左侧 50 像素，我想绘制一个虚线连接器来指示如果你释放节点应该是小时候搬到这里。

为了做到这一点，我的想法是我检查左边 50 像素的元素。有没有办法查看 d3 中特定 x,y 位置的内容？我尝试的是在拖动过程中检查这一点。

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

但是，这仅返回 svg 元素。在 d3 或任何其他想法中是否有类似的方法？

-蒂姆

Answer 1

我认为您基本上有一个碰撞/交叉检测问题需要解决。正如我在上面发布的链接中所提到的，对于在 SVG 或 D3 中执行此操作的可靠方法，浏览器似乎不一致。

但是，在您的树示例中，解决此问题的一种方法(来自 this answer 的技术 1)是围绕与节点相同的 x,y 坐标绘制更大的透明圆圈。然后您可以检测这些鼠标悬停事件并绘制临时连接器以显示用户。

我在这里有一个工作示例:
http://bl.ocks.org/explunit/5603250

关键部分是绘制较大的透明节点，然后在其上检测鼠标悬停事件:

  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)

其余的代码只是围绕拖动和跟踪源/目标随着事物移动而进行的逻辑。

我不确定这是否比来自 this answer 的技术 2 好得多，但你的问题让我很想尝试这种方法。