Accepted answer

For moving the circle over other circles, you need to re append it (refer here):

d3.selection.prototype.moveToFront = function() {  
      return this.each(function(){

Then add (mouseover/mouseout) listener to the node group like this:

  d3.selectAll(".node").on("mouseover", function(d) {;//bring to front
        var circle ="circle");//select the circle in the group
        circle.transition().duration(500).attr("r", d => d.r*2)     
      .on("mouseout", function(d) {
        var circle ="circle");
        circle.transition().duration(500).attr("r", d => d.r)     

Working code here

Related Query

More Query from same tag