I am working with D3 lib to show bubble chart. Everything is good util I draw a text in arc. To draw arc and text, I read in: https://www.visualcinnamon.com/2015/09/placing-text-on-arcs/. So, I want to draw text like this: Expected[1] [1]: https://i.stack.imgur.com/2KN5x.png In my opinion, I will create 2 arcs with 1 arc is hidden and append text. To create a arc path, I have: M start-x, start-y A radius-x, radius-y, x-axis-rotation, large-arc-flag, sweep-flag, end-x, end-y. But when I create, I difficulty when draw coordinates start_x and start_y, end_x, end_y. This is my output. My output[2] [2]: https://i.stack.imgur.com/Lwplg.png My code of arc hidden:

.attr('d', function (d, i) {
          const start_x = d.r * k;
          const start_y = 0;
          return 'M ' + -start_x + ' ' + start_y + ' A ' + start_x  + ' ' + start_x + ' 0 0 1 ' + start_x + ' ' + start_y;
        })

And code of arc show:

.attr('d', function (d, i) {
          const start_x = d.r * k;
          const start_y = 0;
          return 'M ' + -start_x + ' ' + start_y + ' A ' + start_x + ' ' + start_x + ' 0 1 0 ' + start_x + ' ' + start_y;
        })

I try increase coordinate_x and coordinate_y at start point and end point but it's not true. Ignore about color, I hope that anyone can help this. You can checkout source code in: https://github.com/hunghaui2310/d3-bubble-chart Check it in 507 line of /js/script.js. Thanks all