Accepted answer

Just set color and size in the handlers:

.on("mouseover", function(d) {"r", 10).style("fill", "red");
.on("mouseout", function(d) {"r", 5.5).style("fill", "#fff8ee");


I don't know why, but while used to work, it doesn't anymore. I now use

So, if we consider svg as the graph and all its circles being red by default, we can change the color of the circles to green on mouseover and return the color to red on mouseout like this:

svg.on("mouseover", function(d){
.style("fill", "green");
.on("mouseout", function(d){
.style("fill", "red");

Related Query