D3 Overlapping Dots on Hover

I’m trying to make a better user-experience (not really related to the challenge). When you hover the mouse over a dot that is under another dot, I’d like that dot to be brought to the front.

I thought that z-index: with position: would be the way to go, but it didn’t help.

Any ideas?