如何检查鼠标是否在d3 geo中的实际地图范围内？

Question

我试图查找鼠标是否在d3中绑定的地图内。我正在使用地图projection.invert(d3.mouse(container))方法来找到它。

如果在范围内正确，则它正在工作。但是问题是，当我将鼠标移出实际边界之外时，它仍然给我一些坐标（纬度）。

我在“可观察”中设置了demo。

有什么办法知道我是否将鼠标移出地图边界？

Answer 1

您可以设置一个简单的标志以确保您在路径上：

d3.select(img).selectAll('path')
  .on("mouseover", function() { mutable isOn = true; })
  .on("mouseout", function() { mutable isOn = false; });

或者只是更改您的mousemove使其作用于路径而不是svg：

d3.select(img).selectAll('path').on("mousemove", function() {
  mutable inverse = projection.invert(d3.mouse(this));
  mouse.attr("transform", `translate(${projection(mutable inverse)})`);
});

更新了observable。