使用D3.js实现圆形数据点鼠标悬停显示数据的问题求助

你当前使用的是D3 v3版本，按照以下步骤修改即可实现悬停效果： #

1. 新增Tooltip样式 #

在现有<style>标签中添加以下样式：

.tooltip {
  position: absolute;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  display: none;
  z-index: 999;
}

2. 初始化Tooltip容器 #

在d3.csv读取数据的代码最开头，新增Tooltip的DOM创建逻辑：

d3.csv('data.csv', function (error, rows) {
  // 新增tooltip容器
  const tooltip = d3.select('body').append('div')
    .attr('class', 'tooltip');

  // 原有逻辑不变
  var data = [];
  rows.forEach(function (d) {
    // ...原有代码无需修改
  })
  // ...其他原有逻辑无需修改

3. 给圆形元素绑定鼠标悬停事件 #

找到代码中创建圆形的部分，在.append('circle')之后链式添加事件监听：

cor
  .filter(function (d) {
    // 原有过滤逻辑不变
    var ypos = domain.indexOf(d.y);
    var xpos = domain.indexOf(d.x);
    for (var i = ypos + 1; i < num; i++) {
      if (i === xpos) return true;
    }
    return false;
  })
  .append('circle')
  .attr('r', function (d) {
    return (width / (num * 2)) * (Math.abs(d.value) + 0.1);
  })
  .style('fill', function (d) {
    if (d.value === 1) {
      return '#000';
    } else {
      return color(d.value);
    }
  })
  // 新增以下悬停事件代码
  .on('mouseover', function(d) {
    tooltip.style('display', 'block')
      .html(`
        变量X: ${d.x}<br>
        变量Y: ${d.y}<br>
        相关系数: ${d.value.toFixed(2)}
      `)
  })
  .on('mousemove', function() {
    tooltip.style('left', (d3.event.pageX + 10) + 'px')
      .style('top', (d3.event.pageY + 10) + 'px')
  })
  .on('mouseout', function() {
    tooltip.style('display', 'none')
  })

修改完成后鼠标悬停在圆形上就会展示对应的数据信息，tooltip会跟随鼠标位置移动，移出后自动隐藏。

内容的提问来源于stack exchange，提问作者Sky Hopper