d3 - 旋转x轴标签

Question

d3 - 旋转x轴标签

javascriptd3.jsheatmaptimeline

6

我正在尝试使用图表：

在此输入图片描述

使用我的数据。

我想要旋转x轴标签。

以下是代码：

var timeLabels = svg.selectAll(".timeLabel")
          .data(times)
          .enter().append("text")
            .text(function(d) { return d; })
            .attr("x", function(d, i) { return i * gridSize; })
            .attr("y", 0)
            .style("text-anchor", "end")
            .attr("transform", "translate(" + gridSize / 2 + ", -6)rotate(-90)")
            .attr("class", function(d, i) { return ((i >= 8 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });

但是我得到的结果是，所有的标签都会在一条直线上旋转-90度。相反，我希望每个标签都能旋转到-90度，就像这个例子一样:

enter image description here

我甚至尝试使用.attr("transform", function(d) {return "translate(" + gridSize / 2 + ", -6)rotate(-90)"})但没有效果。

结果：

enter image description here

非常感谢您的帮助。

- user3206082

1

你看过这个教程吗？ - Lars Kotthoff

是的，我尝试了，但结果不是我预期的。我会发布图片。 - user3206082

2个回答

-3

尝试这段代码：

Fiddle：

 svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("id", "x")
    .attr("transform", "translate(0," + (h) + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", function (d) {
    return "rotate(-90)";
});

- Manoj

你所写的函数对我的情况没有帮助。 - user3206082

小提琴甚至无法工作。文本未旋转。 - SmashCode

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AmeliaBR · Accepted Answer

问题在于当您旋转一个元素时，它会围绕本地坐标系的原点（0,0）进行旋转。如果您要旋转的元素不在原点旁边，它可能会移动相当大的距离，并且可能会移动到图表之外。

有两种方法可以解决这个问题：

1. 使用“transform”属性而不是x和y属性来定位标签。这样，标签的坐标系（包括旋转的（0,0）点）将与其一起定位，并且旋转将发生在您期望的位置。@Manoj提供的代码遵循该系统，但假设您正在使用默认的xAxis函数。对于自定义轴标签代码，您的标签被赋予y值为0，x值由一个函数确定。您只需要将这些值移动到transform属性中，特别注意整体位置的变换在旋转和调整之前进行：

var timeLabels = svg.selectAll(".timeLabel")
  .data(times)
  .enter().append("text")
    .text(function(d) { return d; })
    .attr("transform", function(d, i) { 
          return "translate(" + ( i * gridSize) + ",0)"
                  + "translate(" + gridSize / 2 + ", -6)rotate(-90)";
     } )
    .style("text-anchor", "end")
    .attr("class", function(d, i) { return ((i >= 8 && i <= 16) ? 
                               "timeLabel mono axis axis-worktime" : 
                               "timeLabel mono axis"); 
     });

当然，您可以将这两个变换语句组合成一个，如下所示：

    .attr("transform", function(d, i) { 
          return "translate(" + ( (i + 0.5) * gridSize) + ",-6)"
                  + "rotate(-90)")

2. 或者，您可以在旋转语句中指定旋转的中心点，包括您想要围绕其旋转的点的x和y值：

var timeLabels = svg.selectAll(".timeLabel")
  .data(times)
  .enter().append("text")
    .text(function(d) { return d; })
    .attr("x", function(d, i) { return i * gridSize; })
    .attr("y", 0)
    .attr("transform", function(d, i) { 
          return "translate(" + gridSize / 2 + ", -6)" +
                 "rotate(-90 "+ ((i + 0.5) * gridSize) + " " + (-6) +")";
     } )
    .style("text-anchor", "end")
    .attr("class", function(d, i) { return ((i >= 8 && i <= 16) ? 
                               "timeLabel mono axis axis-worktime" : 
                               "timeLabel mono axis"); 
     });

正如您所看到的，这个版本相当重复，因为我们必须计算标签的位置两次——一次是为了定位它，一次是为了设置旋转的中心。您可以看到为什么大多数示例（以及d3轴函数）使用变换来定位标签，这样它们就可以在原地旋转。