0

I am trying to orientate the x-axis text on the waterfall chart example http://dimplejs.org/advanced_examples_viewer.html?id=advanced_waterfall

Motivated by How to rotate x-axis text in dimple.js? in the console for the above webpage I injected:

myChart.axes[0].shapes.selectAll("text").attr("transform", "rotate(-45)");

resulting in:

enter image description here

as can be seen the axis rotate but their position has been translated.

My particular use case can be seen:

enter image description here

there are more categories and the axis text needs to be rotated to prevent overflow. How would I rotate the axis text (in my case I want -90 degrees rather then -45) and prevent the resulting position translation?

In the case of the dimplejs website example I can do

myChart.axes[0].shapes.selectAll("text")
    .attr("transform", "translate(-150, 200) rotate(-90)")

to manually align the text:

enter image description here

On my particular chart with more categories I need to do:

myChart.axes[0].shapes.selectAll("text")
    .attr("transform", "translate(-130, 140) rotate(-90)")

A nasty hack with coordinates that need to be manually changed depending on data.

Community
  • 1
  • 1
jdharrison
  • 30,085
  • 4
  • 77
  • 89
  • Have you tried rotating about the center of the `text` element instead of the coordinate origin? – Lars Kotthoff Jul 17 '14 at 08:46
  • @LarsKotthoff I have tried rotating then translating with respect to the parents boundary box `this.parentNode.getBBox()` this seems to get pretty close for my use case (-90 rotation). – jdharrison Jul 17 '14 at 10:28
  • Well it seems to me what you really want in this case is change the rotation point. – Lars Kotthoff Jul 17 '14 at 10:59

1 Answers1

1

This problem is specific to the way that I've done the waterfall chart example. Dimple has built in rotation for long labels as you can see in this example when you resize the popup.

Unfortunately in order to deal with duplicate x values I created the x dimension in the waterfall example which takes an integer that then gets replaced with the text label after drawing. This means that the sizing logic thinks there is just a single digit integer and doesn't do the rotation. Here's the code from the dimple source for rotating x values:

axis.shapes.selectAll("text")
    .style("text-anchor", "end")
    .each(function () {
         var rec = this.getBBox();
         d3.select(this)
            .attr("transform", "rotate(90," + (rec.x + rec.width) + "," + (rec.y + (rec.height / 2)) + ") translate(5, 0)");
    });
John Kiernander
  • 4,904
  • 1
  • 15
  • 29