Rotate x axis text to d3

Question

I am new to d3 and svg coding and looking for a way to rotate text on xAxis diagrams. My problem is that usually the xAxis headers are longer than the bars in the histogram. Therefore, I am looking to rotate the text so that it works vertically (and not horizontally) under xAxis.

I tried to add transform attribute: .attr ("transform", "rotate (180)")

But when I do this, the text completely disappears. I tried increasing the height of the svg canvas, but was unable to view the text.

Any thoughts on what I am doing wrong would be wonderful. Do I also need to adjust the x and y positions? And if so, how much (it’s hard to troubleshoot when I see it in Firebug).

Answer 1

If you set the rotation transform (180), it rotates the element relative to the beginning , but not relative to the text anchor. So, if your text elements also have the x and y attribute set to place them, it is likely that you rotated the text overs. For example, if you tried,

<text x="200" y="100" transform="rotate(180)">Hello!</text> 

the text anchor will be at the level of ⟨-200 100⟩. If you want the text anchor to remain at the ⟨200,100 level, you can use the transform to place the text before rotating it, thereby changing the origin.

 <text transform="translate(200,100)rotate(180)">Hello!</text> 

Another option is to use the optional cx and cy arguments for the SVG rotate transform so that you can indicate the start of the rotation. This ends up being a little redundant, but for completeness it looks like this:

 <text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text> 

Answer 2

Shamelessly plucked from elsewhere , all loans to the author.

margin, enabled only to display the bottom margin, should be increased.

 var margin = {top: 30, right: 40, bottom: 50, left: 50}, svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); 

Answer 3

One problem with these rotating labels of the D3 axis is that you have to reapply this logic every time you render the axis. This is due to the fact that you do not have access to the input-update-output selections that the axis uses to visualize ticks and labels.

d3fc is a component library that has a beautify template , allowing you to access the underling data connection used by components.

It has a replacement for the D3 axis, where the axis label is rotated as follows:

 var axis = fc.axisBottom() .scale(scaleBand) .decorate(function(s) { s.enter() .select('text') .style('text-anchor', 'start') .attr('transform', 'rotate(45 -10 10)'); }); 

Please note that rotation only applies to input selection.

You can see some other possible uses for this template on the page.