I’m using the d3 axis component but I want to tweak a few things after it is drawn. Specifically I would like to rotate the text labels by adding a transform to the text elements and also setting the text-anchor attribute from “middle” to “end”.
The problem I’m hitting is that the text-anchor attribute seems to be set asynchronously by the d3 code as part of the transition. When I set the value to “end” in my code it subsequently gets set back to “middle” when the transition runs.
If I wait until transition end before making my change it’s going to look choppy. What I’m wondering is if there is a way to insert myself into the process of drawing and transitioning the axis such that my text-anchor value will be used instead of the default one?
I believe this constitutes a bug in the axis component, so I’ve created a pull request to update label attributes immediately rather than as part of the axis transition. The text element’s text-anchor attribute can’t be interpolated, so there’s no reason to defer the update to the transition, and setting it immediately makes it easy for you to fix it using post-selection.
An alternate fix would be to extend the axis component to support different styles of tick labeling. This way, you wouldn’t need to use post-selection, so there’s no conflict with the axis transition.