How to add some padding between a path and text on it?

d3.js, svg, text

Solution

You could use the `dx` or `dy` properties of the `<text>` element to nudge the text position. For instance `yourTextElementSelection.attr('dy', -10)` would move the text up 10 units.

Problem

I have a path on my chart and also text along this path by textPath. But the text is very stick or close to this path. How can I add some padding between the text and path. So that the text can be slightly moved away from the path. It'll make my chart looks better.

Original source