如何设置文本的字体大小和y位置使其与实心规图表中的条带对齐？

Question

Codepen链接：https://codepen.io/ariff20/pen/WaKJRV

样本数据：https://api.myjson.com/bins/9ene2

我想出了一种方法，可以根据数据和拟合以及尽可能多的频段动态改变频段的半径和内半径。

var x = 100
var bands = mappedData.reduce(function (acc, d, idx) {
      if (idx != 0) {
        x = x - 100 / mappedData.length
      }
      acc.push({
        color: "#eee",
        startValue: 0,
        endValue: maxValue,
        radius: x + "%",
        innerRadius: x - 15 + "%"
      });
      acc.push({
        color: colors[idx % colors.length],
        startValue: 0,
        endValue: d.value,
        radius: x + "%",
        innerRadius: x - 15 + "%",
        balloonText: d.value
      });
      return acc;
    }, []);

但是对于文本和font-size，我真的很难将文本的每一行与每个带的中心对齐，并使用正确的字体大小。这是我的标签代码：

var dataLength = 50 / mappedData.length;
    var y = 0;
    var labels = mappedData.map(function (d, idx) {
      y = y + dataLength;
      return {
        text: d.name,
        x: "49%",
        y: (y / 2) + "%",
        size: 15,
        bold: true,
        color: colors[idx % colors.length],
        align: "right"
      };
    });
  }

另一个重要的注意事项是，无论有多少标签，标签都应以图表的中心结尾。根据数据更改字体大小也很重要。 关于如何实现这一目标的任何想法？