wrapping text on circular textpath
<p>I am building a <a href="https://codepen.io/bumbeishvili/pen/EKJOmE" rel="nofollow noreferrer">chart</a> using <code>D3.js</code>, which shows some info about employee's competencies.   </p>

<p>screenshot:
<a href="https://i.stack.imgur.com/liJga.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/liJga.png" alt="enter image description here"></a></p>

<p>As you can see, some text is larger than container element size, because of that, part of the text, is cut.  I want to wrap these texts inside container. </p>

<p>I found <a href="https://bl.ocks.org/mbostock/7555321" rel="nofollow noreferrer">this example </a> , but I was not able to apply some solution to my chart.</p>

<p>Help would be appreciated...</p>

<p>Here is <a href="https://codepen.io/bumbeishvili/pen/EKJOmE" rel="nofollow noreferrer">charts codepen url</a>
and here is <a href="https://s.codepen.io/bumbeishvili/debug/EKJOmE?editors=0010" rel="nofollow noreferrer">full screen view</a></p>

<p>p.s. I need text to be wrapped by words</p>