Updating an axis from horizontal to vertical breaks tick alignment

Question

Updating an axis from horizontal to vertical breaks tick alignment

chrisnicola opened this issue 7 years ago · comments

JSFiddle: https://jsfiddle.net/u6mLuxpq/

I've noticed that if I take an existing axis that is horizontal (say axisBottom) and then re-call it with axisRight or axisLeft the tick marks all end up on an angle. For right now, my fix is to call select('g.ticks').remove() but I'm assuming that this isn't the ideal solution.

Mike Bostock · Answer 1 · Fri Apr 21 2017 03:57:31 GMT+0800 (China Standard Time)

Changing the orientation of an axis is not currently supported. The recommended way to handle orientation changes is to remove the entire axis (the parent G element) and then add a new axis.

Chris Nicola · Answer 2 · Fri Apr 21 2017 04:19:45 GMT+0800 (China Standard Time)

@mbostock ok good to know. That's what I'm doing now. I do realize it is an unusual situation and only comes up in a demonstration mode I have. Figured I'd mention it just in case it wasn't known.

Mike Bostock · Answer 3 · Fri Apr 21 2017 05:36:37 GMT+0800 (China Standard Time)

Yep, no problem. For what it’s worth, this limitation is documented in the README:

The orientation of an axis is fixed; to change the orientation, remove the old axis and create a new axis.