d3 js中的翻转动作

Question

我有圆环图，check the jsfiddle。侧面圆环图中有文字。现在，圆环图中的文字显示前景色的百分比。我想要的是当我点击前景百分比的文本时，我应该通过翻转过渡获得midground的百分比，类似于flip action in css。我在这段代码上尝试了on click，但我不知道如何使用

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

我怎样才能在d3中这样做？

Answer 1

您可以使用在一个维度上缩放的链式转换来实现此效果：

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

完整示例here。