Javascript 分组条形图下的对齐标签

我对D3还比较陌生，正在尝试向分组条形图添加标签。。下面的图片是一个例子，我想在分组条形图下正确对齐标签

代码

目前，我正在使用以下代码创建分组条形图

renderChart(data) {
    d3.select("#group-bar-chart").select("svg").remove();
    const width = document.querySelector("#group-bar-chart").clientWidth * 0.9,
      height = 500,
      margin = { top: 50, left: 40, bottom: 60, right: 40 },
      chartWidth = width - (margin.left + margin.right),
      chartHeight = height - (margin.top + margin.bottom),
      colors = ["#22a348", "#e63c20", "#367af0"];

    const svg = d3.select("#group-bar-chart").append("svg");
    const chartLayer = svg.append("g").classed("chartLayer", true)

    const xScale = d3.scaleBand();

    const xScale1 = d3.scaleBand().padding(0.05);

    const xInScale = d3.scaleBand();

    const yScale = d3.scaleLinear()

    const color = d3.scaleOrdinal().range(colors);
    const keys = Object.keys(data[0]).filter(k => k !== 'objId' && k !== 'label');

    main(data);
    function main(data) {
      const nested = d3.nest()
        .rollup(function (d) {
          const { 'label': omit, ...res } = d[0];
          return res;
        })
        .key(function (d) { return d.label })
        .entries(data)

      nested.forEach(function (d) {
        d.val = keys.map(function (key) {
          return { key: key, value: d.value[key] }
        })
      })

      setSize(nested)
      drawChart(nested)
    }

    function setSize(nested) {

      svg.attr("width", width).attr("height", height)

      chartLayer
        .attr("width", chartWidth)
        .attr("height", chartHeight)
        .attr("transform", "translate(" + [margin.left, margin.top] + ")")



      xScale.domain(nested.map(function (d) { return d.key }))
        .range([0, chartWidth]).paddingInner(0.3)

      xInScale.domain(keys).range([0, xScale.bandwidth()])

      const yMax = d3.max(nested.map(function (d) {
        const values = keys.map(function (key) {
          return d.value[key]
        })
        return d3.max(values)
      }))

      yScale.domain([0, yMax]).range([chartHeight, 0])

    }

    function drawChart(nested) {
      xScale1.domain(nested.map(d => { return d.key; })).rangeRound([0, chartWidth]);

      const t = d3.transition()
        .duration(1000)
        .ease(d3.easeLinear)


      const barGroup = chartLayer.selectAll(".bar-group")
        .data(nested)

      const newBarGroup = barGroup.enter()
        .append("g")
        .attr("class", "bar-group");

      barGroup.merge(newBarGroup)
        .attr("transform", function (d) { return "translate(" + [xScale(d.key), 0] + ")"; });


      const bar = newBarGroup.selectAll(".bar")
        .data(function (d) { return d.val })

      const newBar = bar.enter().append("rect").attr("class", "bar")


      bar.merge(newBar)
        .attr("width", xInScale.bandwidth())
        .attr("height", 0)
        .attr("fill", function (d) { return color(d.key); })
        .attr("transform", function (d) { return "translate(" + [xInScale(d.key), chartHeight] + ")" })

      bar.merge(newBar).transition(t)
        .attr("height", function (d) { return chartHeight - yScale(d.value); })
        .attr("transform", function (d) { return "translate(" + [xInScale(d.key), yScale(d.value)] + ")" })


      chartLayer.append("g")
        .attr("class", "axis")
        .style('transform', 'translate(0px, 420px)')
        .style('text-anchor', 'middle')
        .call(d3.axisTop(xScale1));
    }

    function wrap(text, width) {
      text.each(function () {
        var text = d3.select(this),
          words = text.text().split(/\s+/).reverse(),
          word,
          line = [],
          lineNumber = 0,
          lineHeight = 1.1, // ems
          y = text.attr("y"),
          dy = parseFloat(text.attr("dy")),
          tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
          line.push(word);
          tspan.text(line.join(" "));
          if (tspan.node().getComputedTextLength() > width) {
            line.pop();
            tspan.text(line.join(" "));
            line = [word];
            tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
          }
        }
      });
    }
  }

我要找的是像贝娄形象。

---

您能提供stackblitz演示吗？有正确的数据。当然。我会尝试你能提供一个stackblitz演示吗？有正确的数据。当然……我会试试