Angular中D3.js+TypeScript元素类型不匹配报错排查求助

问题描述 #

在Angular项目中使用TypeScript结合D3.js开发柱状图，实现鼠标悬停显示对应标签和数据值功能时，出现3个元素相关类型错误，错误提示：

Argument of type 'string' is not assignable to parameter of type 'Element'

尝试过声明字符串类型、在tsconfig.json中设置"noImplicitAny": false，但问题仍未解决。

相关代码 #

// object.entries: 将对象转为键值对数组
svg.selectAll("bars")
  .data(sortedata)
  .enter()
  .append("rect")
  .attr('x', function(d):any {return xAxis(d[0])})
  .attr('y', function(d){return yAxis(Number(d[1]))} )
  .attr('width', xAxis.bandwidth())
  .attr("height", (d) => this.height - yAxis(Number(d[1])))
  .attr("fill", "#d04a35")
  .on('mouseover', mouseover)
  
 const tip = d3.select(".tooltip")

 function mouseover(event,d){
tip
.style('left', `${event.clientX + 15}px`)
.style('top' , `${event.clientX + 15}px`)
.style('opacity', 0.88)

tip.select("h3").html("tag:" +d[0]),
tip.select("h4").html("value:" +d[1]);
}

错误提示截图 #

问题根源与解决方案 #

核心问题 #

D3 v6及以上版本调整了事件回调的参数顺序：原回调第一个参数是事件对象，第二个是数据；现在第一个参数是数据，第二个是事件对象。当前参数顺序完全颠倒，导致类型推断混乱，触发类型不匹配错误。此外还有两处小问题：

1. tip.select("h3").html(...)末尾用了逗号而非分号，语法错误干扰类型检查
2. top属性错误使用event.clientX，应该是event.clientY

修正后的代码 #

// object.entries: 将对象转为键值对数组
svg.selectAll("bars")
  .data(sortedata)
  .enter()
  .append("rect")
  .attr('x', (d) => xAxis(d[0]))
  .attr('y', (d) => yAxis(Number(d[1])))
  .attr('width', xAxis.bandwidth())
  .attr("height", (d) => this.height - yAxis(Number(d[1])))
  .attr("fill", "#d04a35")
  .on('mouseover', mouseover)
  
const tip = d3.select(".tooltip")

// 修正参数顺序：先数据d，再事件event
function mouseover(d, event){
  tip
    .style('left', `${event.clientX + 15}px`)
    .style('top' , `${event.clientY + 15}px`) // 修正为clientY
    .style('opacity', 0.88)

  tip.select("h3").html(`tag: ${d[0]}`); // 替换逗号为分号，改用模板字符串更清晰
  tip.select("h4").html(`value: ${d[1]}`);
}

额外注意事项 #

• 无需设置"noImplicitAny": false，保持严格类型检查更利于项目维护，修正参数顺序后类型会自动匹配
• 确保页面中存在class为tooltip的容器，且内部包含h3和h4元素，否则tip.select()会返回空选择器，可能引发后续错误

内容的提问来源于stack exchange，提问作者SGA-AllStar