d3 js中的翻转动作答案

【问题标题】：flip action in d3 jsd3 js中的翻转动作
【发布时间】：2014-04-03 18:14:20
【问题描述】：

我有甜甜圈图，check the jsfiddle。侧面圆环图中有文字。现在圆环图里面的文字是显示前景色的百分比。我想要的是当我单击前景百分比的文本时，我应该通过翻转过渡获得中景的百分比，类似于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 中做到这一点？

【问题讨论】：

标签： javascript d3.js transition

【解决方案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。

【讨论】：