如何减小分组条形图d3js v4中的矩形大小

// 假设有一个包含数据的数组
var data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  { category: "C", value: 15 }
];

// 定义画布大小和边距
var width = 500;
var height = 300;
var margin = { top: 20, right: 20, bottom: 30, left: 40 };

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

// 计算矩形的宽度
var barWidth = (width - margin.left - margin.right) / data.length;

// 定义线性比例尺
var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.value; })])
  .range([0, height - margin.top - margin.bottom]);

// 创建矩形
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return margin.left + i * barWidth; })
  .attr("y", function(d) { return height - margin.bottom - yScale(d.value); })
  .attr("width", barWidth)
  .attr("height", function(d) { return yScale(d.value); })
  .attr("fill", "steelblue");

// 添加坐标轴
var xAxis = d3.axisBottom()
  .scale(xScale);

var yAxis = d3.axisLeft()
  .scale(yScale);

svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
  .call(xAxis);

svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(yAxis);