transition - 切片的 D3.js 饼图标签不补间

Question

当我点击各种超链接来补间我的图表时：虽然馅饼的切片正在补间，但我不知道如何带上每个切片的标签。

一个主要工作的 JSfiddle 在这里：http: //jsfiddle.net/lukateake/MX7JC/

提前感谢您提供的任何见解。我保证会用我们发现的任何解决方案来更新小提琴，因为我想这种效果会引起很多 D3 玩家的兴趣。

score 2 · Accepted Answer

这里的主要问题在于您的 updateChart 函数 - 当您将数据反弹到弧时，您没有为 sliceLabel 这样做：（添加了第二行）

arcs.data(donut(data.pct)); // recompute angles, rebind data
sliceLabel.data(donut(data.pct));

另一件小事 - 您的切片标签文本选择似乎有点奇怪：

var sliceLabel = label_group.selectAll("text.value")

但是您没有使用 class = "value"; 创建任何文本这实际上并不会产生太大影响，但可能会在其他实现中引起问题 - selectAll("text") 或 selectAll("text.arcLabel") 在这里可能更合适。

1 回答 1