Попытка отладить проблему при переходе с 3.x серии d3 на модульную версию 4.x +.Я разрабатываю с dimple.js, который основан на d3.
Проблема возникает при перерисовке графика с помощью перехода, метки тика оси X не на своих местах .Это не происходит с использованием более старых версий. JSFiddle со старым, корректным поведением. JSFiddle с новым, некорректным поведением.
Проблема, по-видимому, в 3-м параметре rotate: правильные метки имеют ненулевое значение, например
transform="rotate(90,0,231.90625) translate(-5, 0)"
в то время как у неуместных меток есть 0 для 3-го параметра.
transform="rotate(90,0,0) translate(-5, 0)"
Несколько заметок, которые я обнаружил при попытке отладки:
- Метки теряются только при использовании d3переход.Dimple обычно использует
ease-cubic-in-out, но если разработчик указывает 0 миллисекунд в draw(), переход полностью пропускается, и метки всегда отображаются правильно. - Dimple заполняет значения поворота, вызывая
getBBox() on text элементов и используя полученную высоту: см. Строку 300 из dimple 2.2 draw () и строку 301 из dimple 2.3 draw () .При использовании новой версии этот ограничивающий прямоугольник пуст для элементов, которые будут неправильно расположены: SVGRect {x: 0, y: 0, width: 0, height: 0} - Я попытался определить различия в элементах при их создании, но не уверен, что это источникразница, но я все равно был неудачным.(Я полагаю, что это происходит в функциях по адресу: строка 8983 в
https://github.com/d3/d3/blob/v3.5.17/d3.js и в строке 47 в https://github.com/d3/d3-axis/blob/master/src/axis.js - Просто для повторения, с углублением 2.2 и ниже, которые полагаются на d3 3.x, меткапереходы работают нормально. Только при обновлении до dimple 2.3 и d3 4+ проявляется неправильное поведение. Очевидно, что может быть разница в dimple, но после прохождения кода (практически идентичного между версиями dimple) я считаю, что это d3, чтовводит критическое изменение.