如何根據數組數據更新d3甜甜圈中的文本標簽

Question

我試圖增加的百分比，而不是標簽， 在這里用數組根據。 每次甜甜圈過渡后，我都需要更新標簽。 如果我只插入.text(function (d) { return d.data.value;}); 它只顯示第二個數組的值，並且沒有變化。 我該如何解決？

PS：我在這里看到了類似的問題-但我無法將他們的解決方案用於我的甜甜圈。

Answer 1

在過渡結束時更新標簽：

slice       
    .transition().duration(1000)
        .each("end", function(d,i){
            d3.selectAll('.labels text')
                .text(function(d) {
                  return (((d.endAngle - d.startAngle) / (2 * Math.PI)) * 100).toFixed(0) + '%';
                })
            })
    .attrTween("d", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            return arc(interpolate(t));
        };
    });

更新示例 。