D3.js 将文本放置在圆环图中的弧上

我正在尝试将文本放置在带有使用 D3 创建的内环的圆环图上。 plunker 代码可以在这里访问：plunker http://plnkr.co/edit/AXH9lbY6wenTj1fOTwbU

为了将文本放置在弧上，我想访问 donutData 数组并将值放置在图表的每个环上。

gs.append("text")
.attr("transform", function(d){
    return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i){
    return donutData[i];
});

由于 donutData 数组存储用于创建圆环图的“实际”和“预测”值，因此我希望将这些值放置在图表中的每个弧上。

要将标签添加到圆弧的中心，您需要将标签添加到质心。

gs.selectAll('text').data(function(d) {
    return pie(d);
  })
  .enter().append("text")
  .attr("transform", function(d, i, j) {//calculating the d as done in the path
    k = arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1))(d);;
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) {
    return d.data;
  });

工作代码here http://plnkr.co/edit/AXH9lbY6wenTj1fOTwbU?p=preview

希望这可以帮助！