How to rotate x-axis text in dimple.js?

Question

This is my dimple bar chart (powered by d3):

var sidechart = new dimple.chart(chart_svg, data);
            sidechart.setBounds(60, 30, 200, 300)
            var x = sidechart.addCategoryAxis("x", "Long name");
            sidechart.addMeasureAxis("y", "Measure");
            sidechart.addSeries(["Short name", "Long name"], dimple.plot.bar);
            sidechart.draw();

Text on x-axis is quite long and by default dimple rotates it so it is displayed vertically. I want to rotate it by 45 degrees instead. Using d3 this would be done by doing this:

myAxis.attr("transform", "rotate(-45)");

Unfortunately I am unable to find a similar way of doing that in dimple. Any help will be appreciated.

Lola

Answer 1

You can get hold of the shapes once the draw method has been called and set a transform:

...
sidechart.draw();
x.shapes.selectAll("text").attr("transform", "rotate(-45)");

However dimple already uses the transform to move the labels between the ticks and do the rotate, so you might want to append the transform like this:

...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
    function (d) {
      return d3.select(this).attr("transform") + " rotate(-45)";
    });

I tried this and it offset the labels from where I was expecting, so you may need to add a translate in, but you'll probably need to find an appropriate offset for your own chart, I've used 20 here as an example:

...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
    function (d) {
      return d3.select(this).attr("transform") + " translate(0, 20) rotate(-45)";
    });

Ceremonial