D3.js技术问题：如何为热力图单个rect元素添加鼠标悬停stroke样式

• 你的核心问题是事件参数使用错误：在D3 v6及以后版本中，mouseover回调的第一个参数e是事件对象而非DOM元素，直接调用e.attr()肯定无效。要获取当前触发事件的rect元素，得用d3.select(e.currentTarget)。

• 另外之前无法选中rect，大概率是因为rect没设置fill属性——如果fill为none，SVG元素不会响应鼠标事件，哪怕视觉上能看到它。可以给rect加个透明填充确保可交互。

修正后的完整代码示例：

svg.selectAll('rect')
  .data(mv)
  .enter()
  .append('rect')
  .attr('width', (w - 2*padding)/(mv.length/12))
  .attr('height', (h - 2*padding)/12)
  .attr('x', d => xScale(d.year))
  .attr('y', d => yMap(d.month))
  .attr('fill', 'transparent') // 确保元素能接收鼠标事件，可根据热力图需求替换为实际颜色
  .on('mouseover', (e, d) => {
    // 选中当前rect并设置stroke样式
    d3.select(e.currentTarget)
      .attr('stroke', 'black')
      .attr('stroke-width', 2);
    // 这里可以保留你之前的提示框逻辑
  })
  .on('mouseout', (e, d) => {
    // 鼠标移开后恢复原样式
    d3.select(e.currentTarget)
      .attr('stroke', 'none')
      .attr('stroke-width', 0);
  });

• 如果你用的是D3 v5及更早版本，参数顺序是反过来的（第一个是数据d，第二个是事件e），那获取元素要改成(d, i, nodes) => d3.select(nodes[i])，不过现在主流都是v6+版本，优先用上面的写法。

内容的提问来源于stack exchange，提问作者u-lx