我无法使用过渡更新/动画我的d3v5散点图

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

const data = [
  { x: 10, y: 20 },
  { x: 30, y: 40 },
  { x: 50, y: 60 },
  // 更多数据...
];

const dots = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .attr("r", 5)
  .attr("fill", "blue");

// 假设数据发生变化，更新data数组

const newData = [
  { x: 20, y: 30 },
  { x: 40, y: 50 },
  { x: 60, y: 70 },
  // 更多更新后的数据...
];

// 更新散点图的位置
dots.data(newData)
  .transition()
  .duration(1000)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y);