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

Question

我正在尝试在d3树中实现一些拖放功能，其中当拖动节点时如果它是50个像素直接在节点的左边我想绘制一个虚线连接器以指示如果你释放节点应该像孩子一样在这里移动。

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

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

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

-Tim

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要好得多，但你的问题让我很想尝试这种方法。