CODEWITHSUNDEEP
d3.js
nmastilovic
nmastilovic

Reputation: 43

How to set up labels on both halves of semi-doughnut chart?

I am making a half circle doughnut chart, that currently looks like this: https://jsfiddle.net/rcxp0udt/

You can notice that all of the labels are on the right side of the chart. How ever, I would like to make them look something like this: http://prntscr.com/d4p8qb - so that labels of first half of the semi-circle are on one side, and other half is on the other side. Here is the part of the code that is responsible for that: 

 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 I tried so far in my tests to achieve this has ended up failing. If you have any idea how to achieve this effect, please let me know!

Upvotes: 4

Views: 755

Answers (1)

mdml
mdml

Reputation: 22882

Instead of using midAngle(d2) < Math.PI, use midAngle(d2) > 0:

screenshot of updated pie chart

Make this change where add the text and draw the text polylines (lines 165, 175, and 202).

Upvotes: 2

Related Questions