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 中，浏览器对可靠方式的支持似乎不一致。

但是，在您的树示例中，解决此问题的一种方法（此答案中的技术 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好得多，但是您的问题让我很想尝试这种方法。