D3 Donut Chart Text Centering

I'm using a d3 donut chart for a project and I'm having issues centering the text inside the donut. I found a piece of code that I have modifying, but frankly I don't understand it

Solution 1:

You may have noticed that two labels outside the circle are vertically centered, but the one in the middle is not.

It is missing following line:

 .attr('dy', '0.35em')

This is the new codepen.

I will leave to you to discover why is that line magical.