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

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行取消此text转换:

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

因此,opacity在中text保持为零.您可以检查DOM以确定text元素确实存在(即没有被吹走)但只是不透明度为零.这是D3v2.7和D3v3之间的行为变化.

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

如果你想要一个.delay(500)for straightening,那么你可能必须听取end事件并开始一个新的转换,以便不延迟所有texts 的整个转换.