d3 - 旋转x轴标签 [英] d3 - Rotate x-axis labels

问题描述

我正在尝试一样：

我甚至尝试使用 .attr（transform，function（d）{returntranslate（+ gridSize / 2 +，-6）rotate（-90）}）



帮助将非常高兴。

$ b $问题是当你旋转一个元素时，它会绕着局部坐标系的原点（0,0）旋转。如果你旋转的元素不在原点旁边，它可能移动相当长的距离，并可能被移动到图表外。

1. 使用transform属性而不是使用x和y属性来定位标签。这样，标签的坐标系 - 包括（0,0）旋转点 - 将与它一起定位，旋转将发生在你期望的地方。代码@Manoj给出了以下系统，但假设您使用默认的xAxis函数。对于您的自定义轴标签代码，您的标签给出一个 y 值0和一个 x 功能。您只需要将这些值移动到 transform 属性中，注意在旋转和调整之前的整体位置变换 ：

     var timeLabels = svg.selectAll（。timeLabel）
    .data（times）
    .enter （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& ？
   timeLabel mono axis axis-worktime：
   timeLabel mono axis）; 
   }）; 
     

   当然，您可以将这两个翻译语句合并为：

     .attr（transform，function（d，i）{
    returntranslate（+（（i + 0.5）* gridSize）+ ，-6）
    +rotate（-90））
     




2. 或者，您可以在rotate语句中指定旋转中心，方法是包含您要绕其旋转的点的x和y值：

     var timeLabels = svg.selectAll（。timeLabel）
    .data（times）
    .enter（）。append（text）
    .text （d）{return d;}）
    .attr（x，function（d，i）{return i * gridSize;}）
    .attr（y，0）
    .attr（transform，function（d，i）{
    returntranslate（+ gridSize / 2 +，-6）+ 
   rotate（-90+ + 0.5）* gridSize）++（-6）+）; 
   }）
    .style（text-anchor，end）
    .attr类，函数（d，i）{return（（i> = 8& i≤16）。 
   timeLabel mono axis axis-worktime：
   timeLabel mono axis）; 
   }）; 
     

   正如你所看到的，这个版本是重复的，因为我们必须计算标签的位置两次一次定位，一次设置旋转中心。您可以看到为什么大多数示例（和d3轴函数）使用翻译定位标签，因此它们只能旋转到位。

I'm trying this graph:

with my data.

I wanted to rotate the x-axis labels.

Here's the code :

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

But the result I get is. Entire labels get rotated to -90 deg in a single straight line. Instead I wanted each label to be rotated to -90 deg. Like this:

I even tried using .attr("transform", function(d) {return "translate(" + gridSize / 2 + ", -6)rotate(-90)"}) but it didn't help.

Result :

Help will be very much pleased.

解决方案

The problem is that when you rotate an element, it gets rotated around the origin point, (0,0), of the local coordinate system. If the element you're rotating isn't right next to the origin, it can end up moved quite a large distance, and possibly moved outside the chart altogether.

There are two ways you can fix it:

1. Position the label with a "transform" attribute instead of with x and y attributes. That way, the label's coordinate system -- including the (0,0) point of rotation -- will be positioned with it, and the rotation will happen where you expect. The code @Manoj gave follows that system, but assumes you are using the default xAxis function. For your custom axis label code, your labels are given a y value of 0, and an x value determined from a function. You just need to move those values into the transform attribute, paying careful attention that the transformation of the overall position comes before the rotation and adjustment:

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

   Of course, you could combine those two translation statements, as:

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

2. Alternately, you can specify a center of rotation in the rotate statement, by including the x and y values of the point you want it to rotate around:

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

   As you can see, this version is rather repetitive, as we have to calculate the position of the label twice -- once to position it, and once to set the center of rotation. You can see why most examples (and the d3 axis functions) position the labels with translations, so they can just be rotated in place.

这篇关于d3 - 旋转x轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！