How can I apply a transform to xAxis tick text labels?

[Paul Young]

Hi,

Firstly, I'd like to say thank you for working so hard to develop dc.js. I am a big fan and it really helps non-developers like myself produce work that we would have been next to impossible for us to do by hand. 

I also have a question, please excuse my ignorance if its obvious but I am really struggling to find a way rotate the axis tick labels. I have some ordinal data for which the labels are a big long so I'd like to rotate the text. 

In d3 something like:

.call(xAxis)

        .selectAll("text")  

            .attr("transform", function(d) { return "rotate(-65)"  });

would work. 

And indeed if I do this:

dcchart.selectAll('text').attr('transform', function (d) { return 'rotate(-65)' });

after a chart has rendered then all the text labels on both x and y axis get rotated. 

But is there a way to select from just the xAxis text? 

Reading the wiki I expected .xAxis() to allow me to do this but it doesn't appear to have a .selectAll() method.

Also, assuming there is a way to do this. What is the correct way to apply it? Again from reading the wiki it looks like a renderlet() function is the best bet? If so what would the syntax look like?

Sorry for this basic questions, and thanks in advance for any help.

regards,

Paul.

[Nick Zhu]

Hi Paul,

I am glad that you found dc.js useful =) 

Try the following:

chart.renderlet(function(chart){

  chart.selectAll("g.x text")

    .attr('transform', "rotate(-65)");

});

though there is one timing issue in the currently 1.3 release for renderlet:

https://github.com/NickQiZhu/dc.js/issues/164

It might or might not be a problem in your use case so give it try, and if it is the fix is scheduled for v1.4 release.

Cheers,

Nick

[Paul Young]

Thanks Nick!,

Brilliant, works a treat. For the record, in my case, I found:

.margins({ top: 10, left: 30, right: 10, bottom: 50 })

.renderlet(function (chart) {

                    chart.selectAll("g.x text")

                      .attr('dx', '-30')

                      .attr('transform', "rotate(-90)");

                });

looks about right. And as a workaround for the timing I set the transitionDurations to 0 before the renderAll and back to 750 afterwards. Not idea but hides it better.

Cheers,

Paul

[himanshu...@linguamatics.com]

amazing!

[Aaron Hoffman]

Nick,

I also had to set the values of the "dx" and "dy" properties for the label to appear in the correct position.

This caused a gap to appear between the left side of the xAxis and the bottom of the yAxis. I had to add the following to position it correctly in my case:

chart

  .select("g.axis.y")

  .attr("transform", "translate(71, 0)");

And modifying the labels in this way causes a flicker after the char loads. Is there a better way to rotate the labels at this time?

Thanks,

Aaron