Блог

Ошибка курсора Тепловой Карты

Курсор Тепловой Карты Правильный

Первая ссылка показывает, что происходит с курсором при наведении курсора мыши, это происходит только иногда, а не на всей области поля. Второе звено — это то, что должно происходить. Я не уверен в своей ошибке или в том, почему это может происходить. Я думал, что это может быть связано с выбором тела во всплывающей подсказке, но когда я выбираю идентификатор диаграммы («#chart_svg»), всплывающая подсказка вообще не отображается при наведении курсора мыши. Ниже приведен мой код для подсказки на тепловой карте d3. Кто-нибудь сталкивался с этой проблемой или имеет представление о том, что может произойти?

Для справки я создаю это на приложении AngularJS в его собственном файле компонентов. html просто отображает компонент целиком.

Спасибо!

 // create a tooltip
const tooltip = d3
  .select('body')
  .append('div')
  .attr('class', 'tooltip')
  .style('background-color', 'white')
  .style('border', 'solid')
  .style('text-align', 'center')
  .style('border-width', '2px')
  .style('border-radius', '2px')
  .style('padding', '2px')
  .style('position', 'absolute')
  .style('z-index', '1000')
  .style('font-size', '10px');

const mouseover = function (this: any, event: any, d: any) {
  tooltip.style('opacity', 1);
  d3.select(this).style('stroke', 'white').style('opacity', 0.8);
};
const mousemove = function (event: any, d: any) {
  tooltip
    .text(d.value   ' : '   d.blockCount)
    .style('left', event.x   10   'px')
    .style('top', event.y   10   'px')
    .style('stroke', 'black');
};
const mouseleave = function (this: any, event: any, d: any) {
  tooltip.style('opacity', 0);
  d3.select(this).style('stroke', 'none').style('opacity', 0.8);
};
.on('mouseover', mouseover)
.on('mousemove', mousemove)
.on('mouseleave', mouseleave);