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

Question

Typescript in angular for d3js is getting 3 errors for element. I was creating a mouseover for it to display the tag and value data that corresponds with the data for the bar graph. I have tried declaring the strings. I even added an ("noImplicitAny": false) to the tsconfig.js file. I'm trying to figure out where the issue is at. The code for my question is here:

 // object.enteries: creates arrays of an element 
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]);
}

Here is also a visualization of the errors just incase.

Answer 1

I believe you need a . before the style keyword.

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

However, if you want to set several syles at once, the d3 docs give the example

If you want to set several style properties at once, use an object literal. For example: selection.style({stroke: "black", "stroke-width": "2px"});

Link to docs