Как выровнять метки оси x прямо под полосами и поддерживать постоянное расстояние между группами полос?

Question

Код ниже отображает сгруппированную гистограмму. однако группа group1 имеет 3 подгруппы, тогда как другие группы имеют только 1 подгруппу.

1. Как выровнять метки оси X для group2,3,4 ie, чтобы они отображались прямо под ними?

2. Как сохранить фиксированное пространство между каждой группой ie пространство между группами 1,2,3,4?

постоянное пространство должно быть между каждой группой независимо от подгрупп в каждой из групп.

  var data = [
    { group: "group1", subGroup1: "12", subGroup2: "10", subGroup3: "13" },
    { group: "group2", subGroup1: "6" },
    { group: "group3", subGroup1: "11" },
    { group: "group4", subGroup1: "19" },
  ];
  // set the dimensions and margins of the graph
  var margin = { top: 10, right: 30, bottom: 40, left: 50 },
    width = 460 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3
    .select("#my_dataviz")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // Parse the Data
  var subgroups = ["subGroup1", "subGroup2", "subGroup3"];
  // List of groups = species here = value of the first column called group -> I show them on the X axis
  var groups = d3
    .map(data, function (d) {
      return d.group;
    })
    .keys();

  // Add X axis
  var x = d3.scaleBand().domain(groups).range([0, width]).padding([0.2]);
  var xAxis = d3.axisBottom(x).tickSize(10);
  svg
    .append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  // Another scale for subgroup position
  var xSubgroup = d3
    .scaleBand()
    .domain(subgroups)
    .range([0, x.bandwidth()])
    .padding([0.05]);

  // Add Y axis
  var y = d3.scaleLinear().domain([0, 40]).range([height, 0]);
  var yAxis = d3.axisLeft(y);
  svg.append("g").call(yAxis);

  // color palette = one color per subgroup
  var color = d3
    .scaleOrdinal()
    .domain(subgroups)
    .range(["#e41a1c", "#377eb8", "#4daf4a"]); // red, blue, green

  // Show the bars
  svg
    .append("g")
    .selectAll("g")
    // Enter in data = loop group per group
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function (d) {
      return "translate(" + x(d.group) + ",0)";
    })
    .selectAll("rect")
    .data(function (d) {
      return subgroups.map(function (key) {
        return { key: key, value: d[key] };
      });
    })
    .enter()
    .append("rect")
    .attr("x", function (d) {
      return xSubgroup(d.key);
    })
    .attr("y", function (d) {
      if (d.value) {
        return y(d.value);
      }
    })
    .attr("width", xSubgroup.bandwidth())
    .attr("height", function (d) {
      if (d.value) {
        return height - y(d.value);
      }
    })
    .attr("fill", function (d) {
      return color(d.key);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="my_dataviz"></div>