如何在使用d3.js滚动时将x轴保持在固定位置？

// 创建固定的x轴元素
var xAxis = d3.select("body")
  .append("svg")
  .attr("id", "x-axis")
  .append("g")
  .attr("transform", "translate(50, 50)") // 设置初始位置

// 创建滚动容器
var scrollContainer = d3.select("body")
  .append("div")
  .attr("id", "scroll-container")
  .style("overflow", "scroll")
  .style("height", "300px") // 设置容器高度

// 设置滚动事件监听器
scrollContainer.on("scroll", function() {
  // 更新x轴位置
  var scrollPosition = d3.select(this).node().scrollTop;
  xAxis.attr("transform", "translate(50, " + scrollPosition + ")");
});

// 绘制图表内容
// ...