1

我已经使用 D3JS 创建了一个图表，它工作正常。但是，我想在弧内设置不同的文本旋转，但我无法弄清楚如何。

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

当前和所需的文本对齐方式 - 图像

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;
}
4

1 回答 1

0

你需要重新设计一些东西才能得到你想要的效果。文本标签相对于整个图形旋转。相反，使用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 "";
      }
    });

这里的工作示例

于 2016-03-20T21:47:55.257 回答