D3.js:让x轴每秒在时间序列图中平滑过渡？

// 示例数据
var data = [
  { time: new Date("2022-01-01T00:00:00"), value: 10 },
  { time: new Date("2022-01-01T00:01:00"), value: 20 },
  { time: new Date("2022-01-01T00:02:00"), value: 15 },
  // ...
];

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

// 定义比例尺
var xScale = d3.scaleTime()
  .domain(d3.extent(data, function(d) { return d.time; }))
  .range([0, 400]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.value; })])
  .range([200, 0]);

// 创建坐标轴
var xAxis = d3.axisBottom(xScale);

svg.append("g")
  .attr("transform", "translate(50, 250)")
  .call(xAxis);

// 创建折线图
var line = d3.line()
  .x(function(d) { return xScale(d.time); })
  .y(function(d) { return yScale(d.value); });

svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "steelblue");

// 动态更新
setInterval(function() {
  // 更新数据
  // ...

  // 更新x轴位置
  svg.select("g")
    .transition()
    .duration(1000)
    .attr("transform", "translate(" + xScale(new Date()) + ", 250)");
}, 1000);