dimple.js - метка осевой оси выше формы

Question

Чтобы избежать беспорядка с усечением или поворотом меток оси на диаграммах строк, я пытаюсь разместить ярлык над самой строкой, где есть много места. Мне удалось преобразовать SVG, чтобы переместить ярлык, но он находится ниже самого окна в терминах z-индекса.

Я не могу использовать CSS Z-индекс для изменения порядка компонентов SVG и коробки все в том же <g>, что и самих (но не сгруппированных в их собственном ребенке <g>) оси, которые, кажется, чтобы сделать повторный заказ трудно.

Любые предложения о том, как получить ярлыки выше?

Answer 1

впадина делает большинство элементов в единый <g> элемент, как вы отметили. Поскольку все элементы являются простыми элементами dom, вы можете использовать что-то вроде jquery для удаления элементов, а затем повторно добавлять их после остальных элементов в <g>, так как элементы svg визуализируются в порядке элементов dom.

см. https://api.jquery.com/detach/.

У меня есть запрос на растяжение для ямочки, где я добавляю элементы <g>, чтобы держать вещи в стороне.

вы могли бы сделать что-то вроде

(псевдокод)

label = $('svg label').detach(); 
$('svg').append(label); 

Это должен поставить метку в конце содержимого SVG, что означает, что будет оказана в течение остального содержимого.