为什么转换会从我的标签中删除文字？

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)

通过开始新的转换，在第114行你cancel this transition on text：

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

因此，opacity的{​​{1}}保持为零。您可以检查DOM以确定text元素确实存在（即没有被吹走）但只是不透明度为零。这是D3v2.7和D3v3之间的行为变化。

现在有很多方法可以根据您最初想要的行为来纠正这种情况。其中一种方法是：http://jsfiddle.net/zvPB6/ 直接标签与其他过渡同步。

如果您想要text .delay(500)，那么您可能必须听取straightening事件并开始新的转换，以便不延迟整个转换所有end s。