如何将缩放正确的y轴添加到堆叠的d3条形图

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

var chart = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 准备数据
var data = [
  { category: "A", values: [10, 20, 30] },
  { category: "B", values: [15, 25, 35] },
  { category: "C", values: [20, 30, 40] }
];

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

// 创建堆叠布局
var stack = d3.stack()
  .keys(["values"])
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetNone);

var stackedData = stack(data);

// 创建颜色比例尺
var colorScale = d3.scaleOrdinal()
  .domain(data.map(function(d) { return d.category; }))
  .range(["#e41a1c", "#377eb8", "#4daf4a"]);

// 创建堆叠的条形图
var bars = chart.selectAll(".bar")
  .data(stackedData)
  .enter()
  .append("g")
  .attr("class", "bar")
  .attr("fill", function(d) { return colorScale(d.key); });

bars.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return xScale(i); })
  .attr("y", function(d) { return yScale(d[1]); })
  .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
  .attr("width", xScale.bandwidth());

// 创建Y轴
var yAxis = d3.axisLeft(yScale);
chart.append("g")
  .attr("class", "y-axis")
  .call(yAxis);

// 添加动画效果
bars.selectAll("rect")
  .transition()
  .duration(1000)
  .attr("y", function(d) { return yScale(d[1]); })
  .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); });