如何根据我的阵列数据更新d3甜甜圈中的文本标签

Question

我正在尝试根据数组添加百分比而不是标签here。 我需要在每次甜甜圈过渡后更新标签。如果我只插入.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));
        };
    });

更新了example。