Upside down text on my donut path

I have an SVG donut created using d3.arc, the path of the arc is used by text to label the chart. The problem is the text is upside down in the bottom half of the donut.

I read Nadieh Bremers blog post but it’s a bit confusing for me as it’s using d3 v3 or v4

Is there an easy way to have the text flow from left to right and be the right way up?

To turn the text upside down, the key was to reverse the arc.

On the radar I had a look at what pie was returning for my text tracks and reversed the startAngle and endAngle of of the segments that pie() generated

https://talk.observablehq.com/t/is-there-a-correct-way-to-add-an-operation-to-chained-instructions

I still have to do some text positioning work as the text placement is also reversed on the y offset.

1 Like