D3.js不补间的切片的饼图标签 [英] D3.js pie chart labels for slices not tweening

问题描述

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

When I click on the various hyperlinks to tween my chart: while the pie's slices are tweening but I cannot figure out how to bring along each slice's label.

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

A mostly working JSfiddle is here: http://jsfiddle.net/lukateake/MX7JC/

感谢您提供任何洞察力。我承诺更新我们发现的任何解决方案的小提琴，因为我想这个效果对许多D3'ers感兴趣。

Thanks in advance for any insights you can provide me. I promise to update the fiddle with whatever solution we discover as I imagine this effect is of interest to a great many D3'ers.

推荐答案

p>这里的主要问题是在你的updateChart函数 - 当你反弹数据到弧，你没有这样做sliceLabel：（第二行添加）

The main issue here is in your updateChart function - while you rebound the data to arcs, you did not do so for sliceLabel: (second line added)

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

另一个小东西 - 你的切片标签文本选择看起来有点奇怪：

One other small thing - your slice label text selection seems a little bit strange:

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

但是你没有使用class =value创建文本;这不会真的最终影响很大，但可能会导致其他实现中的问题 - selectAll（text）或selectAll（text.arcLabel）可能更适合这里。

but you are creating no text with class = "value"; this doesn't really end up affecting much, but might cause problems in other implementations - selectAll("text") or selectAll("text.arcLabel") might be more appropriate here.

更新了 http://jsfiddle.net/MX7JC/9/ 小提示

这篇关于D3.js不补间的切片的饼图标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！