How to customize labels on both halves of a semi-load chart?

Question

I am making a semicircular donut diagram that currently looks like this: https://jsfiddle.net/rcxp0udt/

You may notice that all labels are located to the right of the chart. Be that as it may, I would like them to look something like this: http://prntscr.com/d4p8qb - so that the marks of the first half of the semicircle are on one side and the other half are on the other. Here is the part of the code that is responsible for this:

 polyline.transition().duration(1000)
    .attrTween("points", function(d){
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
            return [arc.centroid(d2), outerArc.centroid(d2), pos];
        };
    });

However, every solution that I have tried so far in my tests to achieve this has failed. If you have ideas on how to achieve this effect, let me know!

Answer 1

midAngle(d2) < Math.PI midAngle(d2) > 0:

, ( 165, 175 202).