D3. js Подсказка не отображается при наведении мыши (или вообще) - PullRequest
Новая
       24

D3. js Подсказка не отображается при наведении мыши (или вообще)

1 голос
/ 27 января 2020

У меня есть карта Канзас-Сити с данными о количестве преступлений в каждом районе, и я хочу добавить всплывающую подсказку, чтобы отобразить количество преступлений в каждом районе, когда вы наводите курсор на нее. Вот где и как я это определил: 

  var map = d3.select('#map').selectAll('path')
    .data(data[0].features)
    .enter()
    .append('path')
    .attr('d', path)
    .style('stroke', 'black')
    .style('stroke-width', 0.75)
    .on('mouseover', function(d) {
        var tooltip = d3.select('#myTooltip');

        tooltip.style('display', 'block');
        tooltip.style('left', d3.event.pageX);
        tooltip.style('top', d3.event.pageY);

        tooltip.html(d.properties.neighbourhood + ': ' + d.count);
    })
    .on('mousemove', function(d) {
        // var tooltip = d3.select('#myTooltip');
        tooltip.style('left', d3.event.pageX);
        tooltip.style('top', d3.event.pageY);
    })
    .on('mouseleave', function(d) {
        // var tooltip = d3.select('#myTooltip');
        tooltip.style('display', 'none');
    });

У меня также есть отдельный map.datum, где я определяю цвета. Когда я загружаю страницу, на событии ничего не происходит, и у веб-инспектора есть какой-то странный код под событиями. 

function(i) {
  var o = t.event;
  t.event = i;
  try {
    n.call(this, this.__data__, e, r)
  } finally {
    t.event = o
  }
}

Это так для всех трех. Кто-нибудь видел это раньше и имел представление о том, что я могу делать неправильно?

Ценю любую помощь или предложения !!

1 Ответ

1 голос
/ 27 января 2020

Есть несколько возможностей. Кажется, во-первых, не очевидно, где на странице определено #myTooltip.

Если он вложен в <svg>, он должен быть потомком <foreignObject>. См. MDN ForeignObject . Вот также пример .

Если он находится вне svg, возможно, он скрыт вашим viz. Посмотрите на инструменты разработчика, чтобы увидеть, изменяются ли его атрибуты во время наведения мыши, как и предполагалось.

...