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

【问题标题】：How to check if the mouse is inside actual map bounds in d3 geo?如何检查鼠标是否在 d3 geo 的实际地图范围内？
【发布时间】：2019-04-03 15:17:39
【问题描述】：

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

如果在界限内正确，它就可以工作。但问题是，当我将鼠标移动到实际边界之外时，它仍然会给我一些坐标（经纬度）。

我在 Observable 中创建了一个demo。

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

【问题讨论】：

标签： javascript d3.js projection

【解决方案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。

【讨论】：

我必须使用带有 d3.geoContains([long, lat]) 的画布。为了演示，我使用了 SVG。