D3.js:如何在放大和缩小时将标记和文本保持在同一位置

// 创建缩放行为
var zoom = d3.zoom()
  .scaleExtent([0.5, 2]) // 设置缩放范围
  .on("zoom", zoomed); // 缩放事件

// 创建容器元素
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .call(zoom); // 应用缩放行为

// 添加标记和文本
var data = [1, 2, 3, 4, 5];
var circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return d * 50; })
  .attr("cy", 250)
  .attr("r", 20)
  .style("fill", "blue");

var labels = svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("x", function(d) { return d * 50; })
  .attr("y", 250)
  .text(function(d) { return "Label " + d; })
  .style("fill", "white");

// 缩放事件处理函数
function zoomed() {
  // 调整容器元素大小
  svg.attr("transform", d3.event.transform);

  // 更新标记和文本位置
  circles.attr("transform", d3.event.transform);
  labels.attr("transform", d3.event.transform);
}