d3.js更新条形图的问题

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

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

// 定义比例尺
var xScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 400]);

var yScale = d3.scaleBand()
  .domain(data.map(function(d, i) { return i; }))
  .range([0, 200])
  .padding(0.1);

// 创建条形图
var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", function(d, i) { return yScale(i); })
  .attr("width", function(d) { return xScale(d); })
  .attr("height", yScale.bandwidth())
  .attr("fill", "steelblue");

// 更新条形图
data[2] = 35; // 假设数据发生变化
xScale.domain([0, d3.max(data)]); // 更新比例尺

svg.selectAll("rect")
  .data(data)
  .transition()
  .duration(500)
  .attr("width", function(d) { return xScale(d); });