将子元素移至层次结构的父母

Question

堆叠的条形图

我正在使用D3 JS来创建当前创建

<g class="layer" fill="#ff7f50">
    <rect
      class="rec"
      id="24-May-2022 02:46 PM (EST)"
      x="91.14551083591323"
      width="106.99690402476782"
      y="320"
      height="80"
    >

<text x=".." y="..">Some Text</text>

</rect>
    <rect
      class="rec"
      id="30-Apr-2022 12:00 AM (EST)"
      x="289.28792569659436"
      width="106.99690402476782"
      y="294.7368421052632"
      height="105.26315789473682"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="31-Mar-2022 12:00 AM (EST)"
      x="487.4303405572755"
      width="106.99690402476782"
      y="144"
      height="256"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="28-Feb-2022 12:00 AM (EST)"
      x="685.5727554179566"
      width="106.99690402476782"
      y="377.77777777777777"
      height="22.22222222222223"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="31-Jan-2022 12:00 AM (EST)"
      x="883.7151702786377"
      width="106.99690402476782"
      y="352"
      height="48"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="31-Dec-2021 12:00 AM (EST)"
      x="1081.8575851393189"
      width="106.99690402476782"
      y="361.9047619047619"
      height="38.095238095238074"
    >
<text x=".." y="..">Some Text</text>
</rect>
  </g>
  <g class="layer" fill="#FF0000">
    <rect
      class="rec"
      id="24-May-2022 02:46 PM (EST)"
      x="91.14551083591323"
      width="106.99690402476782"
      y="280"
      height="40"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="30-Apr-2022 12:00 AM (EST)"
      x="289.28792569659436"
      width="106.99690402476782"
      y="84.21052631578947"
      height="210.5263157894737"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="31-Mar-2022 12:00 AM (EST)"
      x="487.4303405572755"
      width="106.99690402476782"
      y="127.99999999999999"
      height="16.000000000000014"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="28-Feb-2022 12:00 AM (EST)"
      x="685.5727554179566"
      width="106.99690402476782"
      y="355.55555555555554"
      height="22.22222222222223"
    >
<text x=".." y="..">Some Text</text>
</rect>
    <rect
      class="rec"
      id="31-Jan-2022 12:00 AM (EST)"
      x="883.7151702786377"
      width="106.99690402476782"
      y="320"
      height="32"
    ><text x=".." y="..">Some Text</text></rect>
    <rect
      class="rec"
      id="31-Dec-2021 12:00 AM (EST)"
      x="1081.8575851393189"
      width="106.99690402476782"
      y="361.9047619047619"
      height="0"
    ><text x=".." y="..">Some Text</text></rect>
  </g>
  <g class="layer" fill="#90ee90">
    <rect
      class="rec"
      id="24-May-2022 02:46 PM (EST)"
      x="91.14551083591323"
      width="106.99690402476782"
      y="120.00000000000001"
      height="160"
    ><text x=".." y="..">Some Text</text></rect>
    <rect
      class="rec"
      id="30-Apr-2022 12:00 AM (EST)"
      x="289.28792569659436"
      width="106.99690402476782"
      y="31.578947368421062"
      height="52.6315789473684"
    ><text x=".." y="..">Some Text</text></rect>
    <rect
      class="rec"
      id="31-Mar-2022 12:00 AM (EST)"
      x="487.4303405572755"
      width="106.99690402476782"
      y="79.99999999999999"
      height="48"
    ><text x=".." y="..">Some Text</text></rect>
    <rect
      class="rec"
      id="28-Feb-2022 12:00 AM (EST)"
      x="685.5727554179566"
      width="106.99690402476782"
      y="0"
      height="355.55555555555554"
    ><text x=".." y="..">Some Text</text></rect>
    <rect
      class="rec"
      id="31-Jan-2022 12:00 AM (EST)"
      x="883.7151702786377"
      width="106.99690402476782"
      y="79.99999999999999"
      height="240"
    ><text x=".." y="..">Some Text</text></rect>
    <rect
      class="rec"
      id="31-Dec-2021 12:00 AM (EST)"
      x="1081.8575851393189"
      width="106.99690402476782"
      y="0"
      height="361.9047619047619"
    ><text x=".." y="..">Some Text</text></rect>
  </g>

DOM -在此DOM中，当前＆lt; text＆gt;已在＆lt; ect; ect; ect; ect;中附加。

我希望此＆lt; text＆gt;在＆lt; ect＆gt;以及＆lt; g＆gt;之内 对于每个＆lt; rect＆gt;都有＆lt; text＆gt;。每个＆lt; text＆gt;都应该出入＆lt; rect＆gt;，以便将其视为堆栈上的标签。

我写过的代码 -

var vLayer = svg
  .selectAll(".layer")
  .data(layers)
  .enter()
  .join("g")
  .attr("class", "layer")
  .attr("fill", (layer) => colors[layer.key])


vLayer.selectAll("rect")
  .data((layer) => layer)
  .join("rect")
  .attr("class", "rec")
  .attr("id", (sequence) => sequence.data.name)
  .attr(
    "x",
    (sequence) => x0Scale(sequence.data.name) //+ x1Scale(sequence.data.type)
  )
  .attr("width", x0Scale.bandwidth())
  .attr("y", (sequence) => yScale(sequence[1]))
  .attr("height", (sequence) => yScale(sequence[0]) - yScale(sequence[1]))

vLayer.selectAll("rect")
.append("text")
  .style("text-anchor", "middle")
  .style("font-size", "26px")
  .style("font-family", "poppins_regular")
  .style("font-weight", "bold")
  .style("fill", "white")
  .attr("x", width - x0Scale.bandwidth())
  .attr("y", 50)
  .text(function (data, i) {
    return "some text";
  });

Answer 1

您可以简单地选择“文本”选择“ rects”并尝试附加“ rects”并尝试附加“文本”，然后与已经绑定的数据一起加入这些选择，与您在附加“ rects”时所做的工作类似：

// vLayer.selectAll("rect")
// .append("text")
vLayer.selectAll("text")
  .data((layer) => layer)
  .join("text")
  .style("text-anchor", "middle")
  .style("font-size", "26px")
  .style("font-family", "poppins_regular")
  .style("font-weight", "bold")
  .style("fill", "white")
  .attr("x", width - x0Scale.bandwidth())
  .attr("y", 50)
  .text(function (data, i) {
    return "some text";
  });

不确定这是否会完全解决您的问题，尤其是在小组中。如果您可以提供“层”数据集来验证，那就太好了。

在旁注上，您的.svg似乎包含嵌套的矩形，这是打算的吗？