1

热图光标错误

热图光标正确

第一个链接显示鼠标悬停时光标会发生什么，这只有时会发生，而不是在框的整个区域上发生。第二个链接是应该发生的事情。我不确定我的错误或为什么会发生这种情况。我认为这可能与在工具提示中选择正文有关，但是当我选择图表 ID（“#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);
4

0 回答 0