Блог

У меня есть карта США с нанесенными городами. Я пытаюсь использовать d3-tip для предоставления всплывающих подсказок для моих городов при наведении курсора мыши. Проблема, с которой я сталкиваюсь, заключается в том, что d3-tip не учитывает проекцию, и я не уверен, как ее применить.

Проекция, которую я использую:

 var projection = d3.geo.mercator()
  .scale(150)
  .translate([width / 2, height / 1.5]);
  

Я применяю его к своим элементам круга следующим образом:

 .attr("cx", function(d) {
  return projection([d.Longitude, d.Latitude])[0];
})
.attr("cy", function(d) {
  return projection([d.Longitude, d.Latitude])[1];
})
  

Проблема в том, что d3-tip, похоже, не принимает атрибуты x и y, он берет их из узла, выдающего событие, и, похоже, не учитывает, что к нему применяется проекция; что для меня не имеет смысла.

Обычно я делаю всплывающие подсказки с помощью d3, добавляя div с абсолютным позиционированием и скрывая его в теле.

Затем, наведя указатель мыши на элемент, я перемещаю div в местоположение указателя мыши и показываю его. Затем я скрываю div, как только происходит событие mouseout.

Это позволяет мне управлять X и Y, а также стилем и текстом всплывающей подсказки.

Вот отличный пример: https://gist.github.com/biovisualize/1016860