爲什麼轉換從我的標籤中刪除文本？

Question

我有一個餅圖，我試圖轉換我的標籤的旋轉。出於某種原因，當我添加transition時，文本被刪除。我已經建立了我的問題的小提琴：

http://jsfiddle.net/samselikoff/k69We/

圖表呈現，但沒有標籤。在110行，取消註釋掉setTimeout函數。一秒鐘後，轉換將正常工作。

爲什麼沒有setTimeout的轉換吹走標籤值？

Answer 1

犯錯誤的一對中的代碼行是行65：

piece.append("g").attr("class", "label").append("text").style("opacity", 0); 

和線路93：

g.selectAll(".label") 
    .data(function(d) {return d;}) 
    .transition() 
    .duration(500) 
    // ... 
    .select('text') 
    // ... 
    .style("opacity", 1) 

您cancel this transition on text上線114通過啓動一個新的過渡：

  g.selectAll(".label") 
      .select("text") 
      .transition() 
      .duration(500) 
      // ... (opacity is not changed here) 

因此，text的opacity保持爲零。您可以檢查DOM，看看確實存在text元素（即不會被吹掉），但只是不透明度爲零。這是D3v2.7和D3v3之間的行爲變化。

現在有很多方法可以根據您最初想要的行爲來糾正這種情況。其中一種方式是這樣的：http://jsfiddle.net/zvPB6/其中伸直標籤與其他轉換同步。

如果爲straightening想要一個.delay(500)，那麼你可能要聽的end事件，爲了不耽誤所有text就是全部過渡開始一個新的轉變。