如何使用D3将堆叠条形图中的条形图设置为最小高度？

<script src="https://d3js.org/d3.v7.min.js"></script>

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  { category: "C", value: 30 }
];

const stack = d3.stack()
  .keys(["value"])
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetNone);

const series = stack(data);

svg.selectAll("rect")
  .data(series)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.data.category))
  .attr("y", d => yScale(d[1]))
  .attr("width", barWidth)
  .attr("height", d => yScale(d[0]) - yScale(d[1]))
  .attr("fill", color);

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

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

// 添加图表标题
svg.append("text")
  .attr("x", width / 2)
  .attr("y", margin.top / 2)
  .attr("text-anchor", "middle")
  .text("Stacked Bar Chart");

// 添加图例
const legend = svg.append("g")
  .attr("transform", "translate(" + (width - margin.right) + "," + margin.top + ")");

legend.selectAll("rect")
  .data(series)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", (d, i) => i * 20)
  .attr("width", 10)
  .attr("height", 10)
  .attr("fill", color);

legend.selectAll("text")
  .data(series)
  .enter()
  .append("text")
  .attr("x", 20)
  .attr("y", (d, i) => i * 20 + 10)
  .text(d => d.key);