transition - トゥイーンしていないスライスの D3.js 円グラフラベル

Question

さまざまなハイパーリンクをクリックしてチャートをトゥイーンすると、円グラフのスライスがトゥイーンされますが、各スライスのラベルを表示する方法がわかりません。

ほとんど動作する JSfiddle はこちらです: http://jsfiddle.net/lukateake/MX7JC/

あなたが私に提供できる洞察を前もって感謝します。私は、この効果が非常に多くの D3'er にとって興味深いものであると想像するので、発見した解決策でフィドルを更新することを約束します。

score 2 · Accepted Answer

ここでの主な問題は、updateChart 関数にあります。データをアークにリバウンドしている間、sliceLabel ではそうしませんでした: (2 行目が追加されました)

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

もう1つの小さなこと-スライスラベルのテキスト選択は少し奇妙に思えます:

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

ただし、class = "value"; でテキストを作成していません。これは実際にはあまり影響しませんが、他の実装では問題を引き起こす可能性があります - ここでは selectAll("text") または selectAll("text.arcLabel") がより適切かもしれません。

http://jsfiddle.net/MX7JC/9/で更新されたフィドル

transition - トゥイーンしていないスライスの D3.js 円グラフ ラベル