Getting "error, Too Late " For D3 Transition

I am trying to do three transitions in onClick event of a Pie Chart. The first transition works but the second and the third one fail. I understood from Mike Bostocks comment on a

Solution 1:

The problem was that the primaryLabel and secondaryLabel I was trying to do transition on were not assigned correctly. I had the following assignment:

self.primaryLabelText = self.arc.append("text")
    .on("click", function(d: any) {
        self.rotateChart(d);
    }).transition()
    .duration(750)
    .attr("transform", function(d: any) {
        return"translate(" + self.label.centroid(d) + ")";
    })
    .attr("dy", "-0.75em")
    .attr("font-family", "sans-serif")
    .attr("font-size", "15px")
    .attr("text-anchor", "middle")
    .attr("class", "sponsor-pie-widget-label")
    .text(function(d: any) {
        if (d.endAngle - d.startAngle < 0.3) {
            return"";
        } else {
            return getStudyLabel(d.index);
        }
    });

As a result of this, the variables contained the reference to the transitions and not the labels themselves as when you chain transitions it gets changed to a transition type object. So I changed that to this:

self.primaryLabelText = self.arc.append("text")
    .on("click", function(d: any) {
        self.rotateChart(d);
    });

self.primaryLabelText.transition()
    .duration(750)
    .attr("transform", function(d: any) {
        return"translate(" + self.label.centroid(d) + ")";
    })
    .attr("dy", "-0.75em")
    .attr("font-family", "sans-serif")
    .attr("font-size", "15px")
    .attr("text-anchor", "middle")
    .attr("class", "sponsor-pie-widget-label")
    .text(function(d: any) {
        if (d.endAngle - d.startAngle < 0.3) {
            return"";
        } else {
            return getStudyLabel(d.index);
        }
    });

It all works now! :)