问如何使用d3v5在条形图中连续绘制多个条形图，条形图之间有空格？

EN

const barGroups = [
  [{ min: 0, max: 10 }, { min: 12, max: 15 }],
  [{ min: 10, max: 14 }],
  [{ min: 4, max: 6 }, { min: 8, max: 11 }],
  [{ min: 0, max: 8 }]
];

const margin = {
  left: 10,
  right: 10,
  top: 10,
  bottom: 40
};
padding = 2;

const width = 500, height = 150;
const barHeight = height / barGroups.length;
console.log(height, barHeight);

const svg = d3.select("svg")
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

const x = d3.scaleLinear()
    .rangeRound([0, width]);
const colors = ['darkred', 'darkgreen', 'darkblue'];

// The last value is the highest
x.domain([0, d3.max(barGroups.map((g) => g[g.length - 1].max))]);

svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
  .call(d3.axisBottom(x))

const groupElements = svg.selectAll('.group')
  .data(barGroups)
  .enter()
  .append('g')
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .classed('group', true);

groupElements.each(function(_, i) {
  d3.select(this)
    .selectAll(".bar")
    .data((d) => d)
    .enter()
    .append("rect")
    .classed("bar", true)
    .attr("x", (d) => x(d.min))
    .attr("width", (d) => x(d.max - d.min))
    .attr("y", i * barHeight + padding)
    .attr("height", barHeight - 2 * padding)
    .attr("fill", colors[i % colors.length]);

});

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

<svg></svg>