JSFiddle - React, Tailwind, and code Playground

CSS

circle{
    fill:orange;
}
circle:hover{
    cursor:pointer;
}

.collapse{
    fill:black;
}

JavaScript

var width = 300,
    height = 300,
    radius = 100;

var g = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

g.append("circle")
    .classed("collapse", true)
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", radius * 0.4 - 10)
    .attr("fill", 'black')
    .on('click', function(d){
            this.setAttribute('class', '');
            // or if your element has other classnames as well
            // scan the class names, remove the "collapse" from it and push the new string into class.
        //if(this.className.baseVal.indexOf('collapse')>=0){...}
    }
   );