使用 D3JS 在圆弧内旋转文本

Question

我使用 D3JS 创建了一个图表，它工作正常。但是，我想在圆弧内设置不同的文本旋转，但我不知道该怎么做。

左图包含当前对齐方式。正确的图表是所需的图表。仅缺少文本旋转。

Current and Desired Text alignment - Image

HTML代码和Json数据：https://dl.dropboxusercontent.com/u/75479878/HtmlAndJson.zip

我认为这是我需要更改的代码，但不知道如何更改：

function computeTextRotation(d) {
  return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}

Answer 1

您需要重新做一些事情才能获得您想要的效果。文本标签相对于整个图形旋转。相反，使用 arc.centroid 将它们放在每个圆弧的中心，然后旋转它们 "locally".

首先，这是你想要的角度（圆弧的角度）：

function computeTextRotation(d) {
  return (x(d.x + d.dx / 2)) / Math.PI * 180;
}

其次，这是放置和轮换调用：

  var text = g.append("g")
    .attr("transform", function(d){
      return "translate(" + arc.centroid(d) + ")";
    })
    .append("text")
    .attr("transform", function(d) {
      return d.parent ? "rotate(" + computeTextRotation(d) + ")" : "";
    })
    .style("text-anchor", "middle")
    .attr("dy", ".35em") // vertical-align
    .style("fill", function(d) {
      return d.textcolor ? d.textcolor : "#000";
    })
    .text(function(d) {
      if (d.parent) {
        return d.name;
      } else {
        aux = d.description;
        return "";
      }
    });

Working example here

使用 D3JS 在圆弧内旋转文本

Text rotation within an arc using D3JS

javascript

charts

text-rotation

d3.js