dimple.js - 将轴标签放在形状上方

Question

为了避免在行图上弄乱轴标签的截断或旋转，我试图将标签放在有很多空间的行本身上。我已经设法进行SVG转换以移动标签，但它在z-index方面低于框本身。

我无法使用CSS z-index重新排序SVG组件，并且这些框与轴本身（但没有分组在他们自己的子<g>中）相同<g>使重新订购变得困难。

有关如何获取上述标签的任何建议吗？

Answer 1

如您所述，

dimple将大多数元素渲染为单个<g>元素。由于所有元素都是简单的dom元素，因此您可以使用类似jquery的元素来移除元素，然后在<g>中的其余元素之后重新添加它们，因为svg元素按照dom元素的顺序呈现。

请参阅https://api.jquery.com/detach/。

我已经获得了对凹坑的拉取请求，我添加了更多<g>个元素以保持分开。

你可能会做类似

的事情

（伪代码）

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

这应该将标签放在svg内容的末尾，这意味着它将呈现在其余内容上。