Axis tick text transforms

[sa-mm]

Are we able to perform transforms on the axis tick text? Also, is this the best spot for these sorts of questions or should I take it to stack overflow?

[sa-mm]

After looking at this example, I put something together:

            tickLabelProps={(value, index) => {
              return {
                transform: 'rotate(90 ' + xScale(value) + ',0)',
              }
            }}

I thought that with d3, you only had to pass in .attr("transform", "rotate(90)"), so this was a little different.

Is there a better way to accomplish this?

[hshoff]

You could also write it like so:

transform: `rotate(90 ${xScale(value) 0})`,

but yes that's the best way for now.

To match d3 behavior we'll need to move the x/y position of the tick labels to a translate transform on the <g> surrounding the tick line and the tick label. Then it will rotate around the correct point without having to pass the optional x,y args to rotate()

[hshoff]

@williaster any thoughts here?

[williaster]

sorry for the delay, was on vacation 🌴 last week.

I agree that having to specify the x,y args to rotate() isn't ideal. I think the solution you proposed to move the x,y position from the tick label <line> +<text> elements to their parent <g> should work well, and then you can simplify the textLabelProps logic a bit. Will require a bit of refactoring but shouldn't be too difficult 👍.

[hshoff]

closing in favor of #165