flip action in d3 js

Question

I have donut chart, check the jsfiddle. There is text in side donut chart. Right now the text inside donut chart is shows foreground color's percentage. What I want is when I click on text of foreground percentage, I should get midground's percentage with flip transition, something like this flip action in css. I tried on click on this code, but I have no idea how to use

var text = svg.append("text")
    .text('0%')
    .attr("text-anchor", "middle")
    .style("font-size",fontSize+'px')
    .attr("dy",fontSize/3)
    .attr("dx",2);

How can I do this in d3?

Answer 1

You can achieve this effect with chained transitions that scale in one dimension:

.on("click", function() {
        d3.select(this)
            .transition().duration(1000)
            .attr("transform", "scale(0,1)")
            .transition().duration(1000)
            .attr("transform", "scale(1,1)")
            .text("foo");
    });

Complete example here.