如何将旧版D3.js缩放平移代码迁移至D3.js v7？

核心问题说明 #

旧版代码中依赖的d3.event.transform在D3.js v7已被废弃，需改为通过事件参数获取变换对象；同时调整异步数据加载、元素创建等API以适配v7规范，最终实现缩放平移时同步更新坐标轴与散点内容。

适配后的完整代码 #

// 设置图表尺寸与边距
const margin = {top: 10, right: 30, bottom: 30, left: 60},
      width = 460 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

// 挂载SVG到页面
const 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})`);

// 读取数据（D3 v7使用Promise风格API）
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv")
  .then(data => {
    // X轴比例尺与轴元素
    let x = d3.scaleLinear()
      .domain([4, 8])
      .range([0, width]);
    const xAxis = svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x));

    // Y轴比例尺与轴元素
    let y = d3.scaleLinear()
      .domain([0, 9])
      .range([height, 0]);
    const yAxis = svg.append("g")
      .call(d3.axisLeft(y));

    // 添加裁剪路径，超出区域的内容不显示
    const clip = svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height)
        .attr("x", 0)
        .attr("y", 0);

    // 创建散点图容器（应用裁剪）
    const scatter = svg.append('g')
      .attr("clip-path", "url(#clip)");

    // 添加散点
    scatter
      .selectAll("circle")
      .data(data)
      .join("circle")
        .attr("cx", d => x(d.Sepal_Length))
        .attr("cy", d => y(d.Petal_Length))
        .attr("r", 8)
        .style("fill", "#61a3a9")
        .style("opacity", 0.5);

    // 配置缩放平移行为
    const zoom = d3.zoom()
        .scaleExtent([.5, 20]) // 缩放范围：0.5倍到20倍
        .extent([[0, 0], [width, height]])
        .on("zoom", updateChart);

    // 添加用于捕获缩放事件的透明矩形
    svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all")
        .call(zoom);

    // 缩放更新函数
    function updateChart(event) {
      // 从事件参数获取变换对象，替代旧版d3.event.transform
      const transform = event.transform;
      // 重新计算比例尺
      x = transform.rescaleX(x);
      y = transform.rescaleY(y);

      // 更新坐标轴
      xAxis.call(d3.axisBottom(x));
      yAxis.call(d3.axisLeft(y));

      // 更新散点位置
      scatter.selectAll("circle")
        .attr("cx", d => x(d.Sepal_Length))
        .attr("cy", d => y(d.Petal_Length));
    }
  })
  .catch(error => console.error.error("数据加载失败:", error));

关键改动点 #

• 移除全局d3.event依赖：缩放事件处理函数updateChart直接接收event参数，通过event.transform获取变换信息，替代旧版d3.event.transform。
• 异步数据加载升级：D3 v7的d3.csv返回Promise，使用.then()处理成功回调，.catch()捕获加载错误，替代旧版回调模式。
• 元素创建语法优化：用join()替代enter().append()，这是D3 v6+推荐的元素创建方式，语法更简洁且支持完整的更新/退出逻辑。
• 修复缩放捕获区域偏移：旧代码中给捕获事件的矩形额外添加了translate，但SVG容器已做过边距平移，导致捕获区域错位，移除该多余变换。
• 比例尺变量可重新赋值：将x、y比例尺声明为let，确保缩放时能重新赋值更新后的比例尺。

内容的提问来源于stack exchange，提问作者Saad Sahir