d3 / d3-axis

Human-readable reference marks for scales.

Home Page:https://d3js.org/d3-axis

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Recalling a different axis, axisLeft to axisRight, is not changing existing text-anchor?

mattaze opened this issue · comments

I am trying to do some user action which allows to change the axis direction, and getting unexpected behaviour.

When empty the g axis element, then g_elm.call(d3.axisRight(y0)), the text-anchor should have changed to "start", but is not, text-anchor stays as "end". Result is tick text appears wrong.

jsfiddle here https://jsfiddle.net/ba9nohc4/1/

first button, keep g element. Keep g element, but clear children.
second button, remove the g element, and create new g element.

axisLeft = text-anchor = "end"
axisRight = text-anchor = "start"

the axis code does look like text-anchor is being run, but not being set.

Is something stopping the text-anchor being changed, or some other attribute on the g element that needs clearing before calling axisRight?

Same issue going from axisRight to axisLeft, expect text-anchor should change from 'start' to 'end'

Axes do not support transitioning between orientations; you need to remove the old axis G element and add a new G element.