向updateChart函数添加一个参数，并使用该参数代替d3.event.transform。我将参数命名为zoomEvent，所以结果是：

var newX = zoomEvent.transform.rescaleX(x);
var newY = zoomEvent.transform.rescaleY(y);

数据似乎没有显示在您提供的代码中，但这里是工作轴缩放的完整代码。你可以在https://codepen.io/pen/上试试。

import * as d3 from "https://cdn.skypack.dev/d3@7.8.4";

// set the dimensions and margins of the graph
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the SVG object to the body of the page
var SVG = d3
  .select("#dataviz_axisZoom")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Add X axis
var x = d3.scaleLinear().domain([4, 8]).range([0, width]);
var xAxis = SVG.append("g")
  .attr("transform", "translate(0," + height + ")")
  .attr("id", "xAxis")
  .call(d3.axisBottom(x));

// Add Y axis
var y = d3.scaleLinear().domain([0, 9]).range([height, 0]);
var yAxis = SVG.append("g").attr("id", "yAxis").call(d3.axisLeft(y));

// Add a clipPath: everything out of this area won't be drawn.
var clip = SVG.append("defs")
  .append("SVG:clipPath")
  .attr("id", "clip")
  .append("SVG:rect")
  .attr("width", width)
  .attr("height", height)
  .attr("x", 0)
  .attr("y", 0);

// Create the scatter variable: where both the circles and the brush take place
var scatter = SVG.append("g").attr("clip-path", "url(#clip)");

//Read the data
d3.csv(
  "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",
  function (data) {
    // Add circles
    scatter
      .selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function (d) {
        return x(d.Sepal_Length);
      })
      .attr("cy", function (d) {
        return y(d.Petal_Length);
      })
      .attr("r", 8)
      .style("fill", "#61a3a9")
      .style("opacity", 0.5);

    // Set the zoom and Pan features: how much you can zoom, on which part, and what to do when there is a zoom
    var zoom = d3
      .zoom()
      .scaleExtent([0.5, 20]) // This control how much you can unzoom (x0.5) and zoom (x20)
      .extent([
        [0, 0],
        [width, height]
      ])
      .on("zoom", updateChart);

    // This add an invisible rect on top of the chart area. This rect can recover pointer events: necessary to understand when the user zoom
    SVG.append("rect")
      .attr("width", width)
      .attr("height", height)
      .style("fill", "none")
      .style("pointer-events", "all")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);
    // now the user can zoom and it will trigger the function called updateChart

    // A function that updates the chart when the user zoom and thus new boundaries are available
    function updateChart(zoomEvent) {
      // recover the new scale
      var newX = zoomEvent.transform.rescaleX(x);
      var newY = zoomEvent.transform.rescaleY(y);

      // update axes with these new boundaries
      xAxis.call(d3.axisBottom(newX));
      yAxis.call(d3.axisLeft(newY));

      // update circle position
      scatter
        .selectAll("circle")
        .attr("cx", function (d) {
          return newX(d.Sepal_Length);
        })
        .attr("cy", function (d) {
          return newY(d.Petal_Length);
        });
    }
  }
);