Нахождение координат в пути d3 svg

Question

Обратите внимание, прежде чем читать это: Это проект, который я делаю для класса в университете, если вы знаете ответ; пожалуйста, только намекните мне в правильном направлении или покажите пример. По той же причине я также не буду публиковать весь свой код, но я опишу свой прогресс в деталях.

Для этого проекта я создал карту с d3. Я добавляю функциональные возможности, но после поиска в Интернете в течение нескольких часов и некоторых попыток, я не смог найти ответ на эту проблему:

Чтобы отобразить дополнительную информацию на боковой панели карты, мне нужно проверить, находятся ли координаты в моих данных по заданному пути SVG. Я могу отобразить координаты на моей карте, используя:

var coords = projection([longitude, latitude]);

После чего я могу использовать массив для отображения координат в правильной области.

Пути нарисованы так:

svg.selectAll(".geodata")
  .data(geodata)
  .enter().append("path")

геоданные определяются как:

var geodata = topojson.feature(data, data.objects.collection).features;

Это топойсон, приведенный к геойсону. (Он хранится как топойсон, так как это файлы меньшего размера, и он будет использоваться в веб-приложении.)

Однако я не могу проверить, находятся ли определенные координаты на заданном пути, вот что я пробовал:

• polygonContains () - я считаю, что это не работает, потому что я работаю с путями, и хотя это технически многоугольник, он, конечно, не хранится как многоугольник, поэтому я не могу манипулировать им таким образом.
• document.elementByPoint () - возвращает самый верхний элемент, и переход к нижнему элементу не поможет, потому что тогда я не могу различить конкретный путь.

Если у вас есть идея или вы знаете пример, я хотел бы услышать ниже. :)

Ответов дано:

Установите для дисплея значение none и найдите свой элемент под elementByPoint:

console.log(this);
var element = document.elementFromPoint(coords[0], coords[1]);
console.log(element);
element.style.display = "none";

Мой комментарий: Это не работает, это дает вам результат внутри тегов div, а не соответствующий путь, по которому вы щелкаете (округ в этом примере).

Answer 1

Поскольку я не могу пометить вопрос как ответ в разделе комментариев, я скопирую здесь комментарий и отмечу его как ответивший.

Использование пути svg, чтобы увидеть, находится ли точка внутри многоугольника, принимает декартовы координаты- в то время как d3 осуществляет выборку путей по координатам большого круга, частота дискретизации может быть достаточно грубой, чтобы точка выходила за пределы формы SVG, но находилась в пределах географического объекта (он будет отображаться на границе нам визуально).Попробуйте d3.geoContains () с исходными географическими данными (если ваши исходные географические данные являются сферическими: пары широты и долготы) - Эндрю Рейд

Большое спасибо, Эндрю!

Редактировать: я сейчас заметилчто я не могу установить это как ответ в течение следующих 2 дней, поэтому я сделаю это после.