javascript - 如何检查鼠标是否在 d3 geo 中的实际 map 边界内？

Question

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

如果在范围内正常工作。但问题是，当我将鼠标移出实际范围时，它仍然给我一些坐标(经纬度)。

我做了一个demo在 Observable 中。

有什么方法可以知道我是否将鼠标移到了 map 边界之外？

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 .