Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 grouped bar chart: How to rotate the text of x axis ticks?

I'm using the Grouped Bar Chart(http://bl.ocks.org/mbostock/3887051), but the text of the x-axis is very long, as shown in attached picture. How to rotate the text? Thank you. enter image description here

like image 435
Linlin Avatar asked Jan 06 '14 10:01

Linlin


People also ask

How do you rotate text on X-axis?

To rotate x-axis text labels, we use “axis. text. x” as argument to theme() function. And we specify “element_text(angle = 90)” to rotate the x-axis text by an angle 90 degree.

How do you rotate axis ticks?

Rotate X-Axis Tick Labels in Matplotlib There are two ways to go about it - change it on the Figure-level using plt. xticks() or change it on an Axes-level by using tick. set_rotation() individually, or even by using ax. set_xticklabels() and ax.


3 Answers

A reasonable solution can be found here

The result looks like this:

enter image description here

Make sure you fully understand this portion of code:

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

-65 is the angle the label text is rotated, in degrees.

Also, you should increase margin at the bottom, so that the rotated text doesn't get clipped.

WARNING: Rotated text is inevitably rendered by browsers at the end (D3 just creates appropriate svg that is interpreted by browsers), and they do a lousy job rendering rotated text (as opposed to lets say advanced drawing or diagramming software).

Also, related StackOverflow questions:

rotate-x-axis-text-in-d3

how-to-rotate-x-axis-text-in-dimple-js

like image 108
VividD Avatar answered Sep 28 '22 03:09

VividD


You might want to consider using D3FC, which has a drop-in replacement for the D3 axis component that supports this feature.

D3FC has an adapter component that will automatically rotate axis labels if they collide:

const axis = fc.axisLabelRotate(fc.axisOrdinalBottom(foodScale));

Here it is in action:

enter image description here

Full disclosure - I am a maintainer and contributor to the D3FC library!

like image 25
ColinE Avatar answered Sep 28 '22 01:09

ColinE


Use SVG transform attribute rotate,

This transform definition specifies a rotation by a degrees about a given point

Try this code :

DEMO

 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(-30)";
    });
like image 37
Manoj Avatar answered Sep 28 '22 01:09

Manoj