d3中的翻轉動作js

Question

我有甜甜圈圖，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做到這一點？

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。