d3.js - 为什么转换会从我的标签中删除文本？

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)

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

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

如果您想要.delay(500) 用于拉直，那么您可能需要监听end 事件并且开始一个新的过渡，以便不延迟所有 text 上的整个过渡。