2

我有一个饼图，我正在尝试转换标签的旋转。出于某种原因，当我添加时transition，文本被删除。我已经解决了我的问题：

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

图表呈现但没有标签。在第 110 行，取消注释掉setTimeout函数。一秒钟后，过渡将正常工作。

为什么没有 setTimeout 的过渡会吹走标签值？

4

1 回答 1

5

代码中的错误行是第 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 the straightening，那么你可能必须监听end事件并开始一个新的转换，以免延迟所有texts 上的整个转换。

于 2013-05-29T21:26:27.340 回答