D3.js图表缩放仅图表生效轴不更新，报错callback.apply is not a function

问题描述 #

基于教程实现的可缩放柱状图，缩放操作仅能让柱状条正常变化，但X轴无法同步更新。zoomed函数中最后一行代码抛出错误：

const zoomed = (event) => {
      xScale.range(
        [margin.left, width - margin.right].map((d) =>
          event.transform.applyX(d)
        )
      );

      svg
        .selectAll(".bars rect")
        .attr("x", (d) => xScale(d.name))
        .attr("width", xScale.bandwidth());

      svg.selectAll(".x-axis").call(xAxis); // 此行抛出错误
    };

错误信息：callback.apply is not a function。打印svg.selectAll(".x-axis")可见对应节点及call方法，但无法定位问题。使用D3.js 7.6.1版本。

问题原因与修复方案 #

核心错误原因 #

错误的本质是**xAxis不是合法的D3轴生成器函数**。在D3 v7中，轴生成器必须通过d3.axisBottom()/d3.axisTop()等方法创建并关联比例尺，示例：

// 正确的X轴生成器定义
const xAxis = d3.axisBottom(xScale);

若xAxis未正确初始化，或后续被覆盖为非函数类型，调用.call(xAxis)时就会触发callback.apply is not a function错误。

缩放逻辑的适配调整 #

针对D3带比例尺（band scale）的缩放场景，还需调整缩放逻辑：

1. 正确更新比例尺：带比例尺不能直接修改range，需通过event.transform.rescaleX()生成缩放后的新比例尺；
2. 选择单个轴元素：页面中通常只有一个X轴容器，使用select(".x-axis")而非selectAll(".x-axis")，避免选择集导致的调用问题。

修正后的zoomed函数示例：

const zoomed = (event) => {
  // 基于原比例尺生成缩放后的新比例尺
  const scaledX = event.transform.rescaleX(xScale.copy());
  
  // 更新柱状条的位置与宽度
  svg.selectAll(".bars rect")
    .attr("x", d => scaledX(d.name))
    .attr("width", scaledX.bandwidth());
  
  // 更新X轴，直接传入新比例尺生成的轴
  svg.select(".x-axis").call(d3.axisBottom(scaledX));
};

额外检查点 #

• 确认X轴容器（.x-axis）在初始化时已正确添加到SVG中；
• 检查代码中是否有其他地方意外修改了xAxis变量的类型。

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