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将它们放在每个弧的中心，然后“本地”旋转它们。

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

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在弧内进行文本旋转

1 个答案: