D3.js Change Circle Radius On Mouse Events

I have circles that I've drawn in d3.js v5. I'm getting the mouse over events as expected, and I can log stuff to the console and everything looks right. The only part that isn't w

Solution 1:

Looking at your code you are setting r like this

.attr("r", 5)

but than you are using

.attr({ r: 8 });

Maybe you need to use this

d3.select(this).attr("r", 8);

Never use d3js just a though

Solution 2:

Change the handleMouseOver and handeMouseOut as following:

function handleMouseOver(d, i) {       
    d3.select(this).transition()
        .duration(1)
        .attr("r", 20);
}

function handleMouseOut(d, i) {   
    d3.select(this).transition()
        .duration(1)
        .attr("r", 4);
}

You can't change the styling using just the .attr attribute, you'll need to define a transition() (docs).

Updated snippet: Click here