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

// 数据
var data = [10, 20, 30, 40, 50];

// svg容器的大小
var width = 500;
var height = 300;

// 创建svg容器
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

// x轴的比例尺
var xScale = d3.scaleBand()
               .domain(d3.range(data.length))
               .range([0, width])
               .padding(0.2); // 设置间隔

// y轴的比例尺
var yScale = d3.scaleLinear()
               .domain([0, d3.max(data)])
               .range([height, 0]);

// 绘制条形图
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
       return xScale(i); // 设置条形图的x轴位置
   })
   .attr("y", function(d) {
       return yScale(d); // 设置条形图的y轴位置
   })
   .attr("width", xScale.bandwidth()) // 设置条形图的宽度
   .attr("height", function(d) {
       return height - yScale(d); // 设置条形图的高度
   })
   .attr("fill", "steelblue");

// 添加x轴
svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(xScale));

// 添加y轴
svg.append("g")
   .call(d3.axisLeft(yScale));