JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
  <g transform='translate(100,100)'>
    <circle id='circleSVG' r='15'></circle>
  </g>
</svg>

CSS

#circleSVG {
  fill: red;
  stroke: green;
}

#circleSVG.testCircle{
  fill: orange;
  opacity:0.25;
}

JavaScript

d3.select('#circleSVG').on('mouseover', function(d) {
  console.log('mouseover')
  
  d3.select(this).classed('testCircle', true)
  console.log(this)
}).on('mouseout', function(){

  d3.select(this).classed('testCircle', false)
})