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

Question

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

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

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)

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

我不确定这比这个答案中的技术 2 好得多，但你的问题让我很好奇尝试这种方法。