d3 v.4+ x-axis tick labels are incorrectly positioned upon transition

Question

Trying to debug an issue when switching from 3.x series of d3 to the modular 4.x+ version. I am developing with dimple.js which builds upon d3.

The problem occurs when redrawing a graph via a transition, x-axis tick labels are misplaced. This does not occur using the older versions. JSFiddle with old, correct behavior. JSFiddle with new, incorrect behavior.

The problem appears to be the 3rd parameter to rotate: the correct labels have a non-zero value like

transform="rotate(90,0,231.90625) translate(-5, 0)"

while the misplaced labels have 0 for the 3rd parameter.

transform="rotate(90,0,0) translate(-5, 0)"

A few notes I've discovered while trying to debug:

• Labels are only misplaced when using a d3 transition. Dimple normally uses ease-cubic-in-out but if the developer specifies 0 milliseconds in draw(), the transition is skipped entirely, and the labels always show up correctly.
• Dimple populates the rotate values by calling getBBox() on text elements and using the resulting height: see line 300 of dimple 2.2 draw() and line 301 of dimple 2.3 draw(). When using the new version, that bounding box is empty on elements which will be incorrectly positioned: SVGRect {x: 0, y: 0, width: 0, height: 0}
• I attempted to identify the differences in the elements when they are created, not sure if this is the source of the difference but I was unsuccessful anyway. (I believe it occurs in the functions at: line 8983 in https://github.com/d3/d3/blob/v3.5.17/d3.js and at line 47 in https://github.com/d3/d3-axis/blob/master/src/axis.js
• Just to reiterate, with dimple 2.2 and below, which rely on d3 3.x, the label transitions work fine. It's only when upgrading to dimple 2.3 and d3 4+, that the incorrect behavior shows up. Obviously there could be a difference in dimple but after walking through the code (virtually identical between dimple versions) I believe it is d3 that introduces the breaking change.