d3 - 旋转x轴标签

Question

我正在尝试graph：

我的数据。

我想旋转x-axis标签。

以下是代码：

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度。像this：

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

结果：

帮助将非常高兴。

Answer 1

问题在于，当您旋转元素时，它会围绕局部坐标系的原点（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轴函数）使用平移来定位标签，因此它们可以在适当的位置旋转。

Answer 2

试试这段代码：

<强> 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)";
});