How to rotate text labels in a D3 x-axis?

Question

I am trying to rotate only the <g class="tick"> 's labels of this D3 bar-chart but the whole axis rotates and ends-up looking like this:

I have tried:

• A .attr("transform", "rotate(...)") : The whole axis rotates...
• The same inside the line .selectAll(".tick") , which causes the labels to rotate along themselves but they get relocated to the corner of the graph, like this:

How can I rotate each element relative to its own position?

Answer 1

您只想为文本元素而不是整个刻度设置.attr("transform", "rotate(...)") 。

Answer 2

I figured it out with this D3 block . I have updated the chart so the old one is no longer visible. The lines added that fix the problem have been commented with "Line added to fix rotation" just in case someone comes across the same issue.

Thanks @Daniel for pointing me out in the right direction.