score:1

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(){
        this.parentNode.appendChild(this);
      });
    };

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

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

Working code here


Related Query

More Query from same tag