无法在rect d3js v4

Question

在 plunker 中，我尝试将xAxis文本（状态）渲染到rect元素的顶部。

通常的解决方法是选择.axis.axis--x并将其放在rect之后。

我还试图在各种类和元素中更改z-index而没有任何成功。

任何知道我失踪的人？

Answer 1

您应该在x轴之前插入layer容器（包含您的rects）。以这种方式更改186-188字符串上的代码：

let barGroups = g.selectAll("g.layer").data(series);
  barGroups.enter().insert("g", ".axis--x") // <== !!!
  .classed('layer', true);

请看my fork of your plunker。

Answer 2

维护<g>元素的正确顺序应该可以正常工作。您需要确保<g class=".axis.axis--x">按照文档顺序排在栏后面。有多种方法可以实现这一目标;一种方法是使用selection.insert("g", ".axis.axis--x")在x轴组之前插入条形码：

// Stacked bars
let barGroups = g.selectAll("g.layer").data(series);
barGroups.enter().insert("g", ".axis.axis--x")
    .classed('layer', true);

查看代码的这个有效fork。