Javascript 在自定义圆轴的一半上旋转文本

我有一个视觉效果，我在甜甜圈/饼图的外围构建一个圆形线性比例。目前，右边的标签很容易阅读，但左边的文本几乎是颠倒的，因此影响了可读性。以下是：

因为总共有20个滴答声，所以我尝试使用逻辑

I>10

：

var axisGroup = graphGroup.selectAll(null)
  .data(d3.range(0, 1.00, 0.05))
  .enter()
  .append("g")
  .attr("transform", function(d,i) {
    if (i<11) {
      return "rotate(" + (-90 + (d * 360)) + ")";
    }
    if (i>10) {
      return "rotate(" + (90 + (d * 360)) + ")";
    }
  });

但这也不起作用，只是将文本绕圆圈移动

问题:

---

我需要使用什么调用来修改文本的旋转（原地），使其右侧向上，左侧更可读？

您正在尝试在已旋转的组内旋转文本。因此，您需要设置文本的中心点（这里使用您的幻数）：

除此之外，我还更改了文本的

文本锚定

：

.attr("text-anchor", function(d){ 
    return d > 0.5 ? "end" : "start"
})

这是分叉的bl.ocks：

.attr("transform", function(d) { 
    return d > 0.5 ? "rotate(180, 283, 4)" : null;
})

.attr("text-anchor", function(d){ 
    return d > 0.5 ? "end" : "start"
})