A great example is Placing texts on arcs using D3.js Nadih Bremer. A long blog with many images, of which the following excerpt:
Flip text on the bottom half
You can already feel how he finished with that look. But I find these marks along the bottom half that are upside down are pretty hard to read. Id prefer these shortcuts to be flipped, so I can read them from left to right again.
To do this, we need to switch the starting and ending coordinates of the current arc tracks along the lower half so that they are drawn from left to right. In addition, the sweep flag must be set to 0 to get an arc that works counterclockwise from left to right.
So, for the final act, add a few more lines of code to the .each () statement
//Create the new invisible arcs and flip the direction for those labels on the bottom half .each(function(d,i) { //Search pattern for everything between the start and the first capital L var firstArcSection = /(^.+?)L/; //Grab everything up to the first Line statement var newArc = firstArcSection.exec( d3.select(this).attr("d") )[1]; //Replace all the commas so that IE can handle it newArc = newArc.replace(/,/g , " "); //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2) //flip the end and start position if (d.endAngle > 90 * Math.PI/180) { var startLoc = /M(.*?)A/, //Everything between the capital M and first capital A middleLoc = /A(.*?)0 0 1/, //Everything between the capital A and 0 0 1 endLoc = /0 0 1 (.*?)$/; //Everything between the 0 0 1 and the end of the string (denoted by $) //Flip the direction of the arc by switching the start and end point (and sweep flag) var newStart = endLoc.exec( newArc )[1]; var newEnd = startLoc.exec( newArc )[1]; var middleSec = middleLoc.exec( newArc )[1]; //Build up the new arc notation, set the sweep-flag to 0 newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; }//if //Create a new invisible arc that the text can flow along svg.append("path") .attr("class", "hiddenDonutArcs") .attr("id", "donutArc"+i) .attr("d", newArc) .style("fill", "none"); });
The only thing that has changed from the previous section is the addition of the if statement. To flip the start and end positions, we can use some more regular expressions. The current initial location x and y is determined by everything that is between capital M and capital A. The current radius is denoted by everything located between capital A and 0 0 1 of the x-axis rotation, a large arc flag and a sweep flag. Finally, the final location is set by everyone between 0 0 1 and the end of the line (indicated by the $ symbol in the regular expression).
So, we save all fragments in different variables and create / replace newArc, using the end line in the if statement, which switched the start and end positions.
The TextPath section requires a small change. For the lower half arcs, the dy attribute should not raise marks above the arc tracks, but not drop marks below the arc tracks. Therefore, we need a small if statement, which will result in two different dy values. (To be able to use d.endAngle in an if statement, I replaced donutData with pie (donutData) in the .data () step. You can still reference the data itself using d.data, not just the d that you can see in the line .text () of the code.)
//Append the label names on the outside svg.selectAll(".donutText") .data(pie(donutData)) .enter().append("text") .attr("class", "donutText") //Move the labels below the arcs for those slices with an end angle greater than 90 degrees .attr("dy", function(d,i) { return (d.endAngle > 90 * Math.PI/180 ? 18 : -11); }) .append("textPath") .attr("startOffset","50%") .style("text-anchor","middle") .attr("xlink:href",function(d,i){return "#donutArc"+i;}) .text(function(d){return d.data.name;});