Как проверить, находится ли мышь внутри границ карты в d3 geo?

Question

Я пытаюсь определить, находится ли мышь внутри карты в d3. Я использую метод карты projection.invert(d3.mouse(container)), чтобы найти его.

Это работает, если правильно в пределах границ. Но проблема в том, что когда я перемещаю мышь за пределы фактической границы, она все равно дает мне некоторые координаты (широта-долгота).

Я сделал демо в Observable.

Есть ли способ узнать, перемещаю ли я мышь за пределы карты?

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)})`);
});

Обновлено Наблюдается .