基于Mike Bostock可复用图表模式实现D3语义缩放遇缩放累积问题

我之前在使用Mike Bostock的可复用图表模式实现语义缩放时，也踩过这个一模一样的坑！问题的核心在于你每次缩放后直接用transform.rescaleX()修改当前的比例尺，然后重新调用图表函数时，新的缩放变换又会叠加在已经被修改过的比例尺上——相当于每次缩放都是在“上一次缩放的结果”基础上再放大/缩小，自然会出现缩放速度越来越快的情况。

核心解决思路 #

我们需要保留原始比例尺的副本，每次缩放都基于这个未被修改过的原始比例尺来计算当前的比例尺，而不是直接修改原始比例尺本身。同时单独维护当前的缩放变换状态，避免变换累积。

修改后的代码示例 #

function chart() {
  let aspectRatio = 10.33;
  let margin = { top: 0, right: 0, bottom: 5, left: 0 };
  let current = new Date();
  
  // 初始化原始比例尺，并保存副本
  let xScale = d3.scaleTime().domain([new Date(current - 86400000), current]);
  let xScaleOriginal = xScale.copy(); // 关键：存储未被修改的原始比例尺
  let currentZoomTransform = d3.zoomIdentity; // 维护当前的缩放变换状态

  function my(selection) {
    selection.each(function() {
      // 基于原始比例尺和当前变换，计算当前要使用的比例尺
      let activeXScale = currentZoomTransform.rescaleX(xScaleOriginal);

      // --------------------------
      // 这里放你的绘制逻辑：轴、图形等
      // 所有需要用到x比例尺的地方，都用activeXScale代替原来的xScale
      // --------------------------

      // 设置缩放行为
      const zoom = d3.zoom()
        .scaleExtent([1, 10]) // 根据需求调整缩放范围
        .on("zoom", function(event) {
          // 更新当前的缩放变换状态，而不是修改比例尺
          currentZoomTransform = event.transform;
          // 重新调用图表函数进行重绘
          selection.call(my);
        });

      d3.select(this).call(zoom);
    });
  }

  // 如果你需要对外暴露比例尺的getter/setter，记得同步更新原始比例尺副本
  my.xScale = function(value) {
    if (!arguments.length) return xScale;
    xScale = value;
    xScaleOriginal = value.copy(); // 更新原始比例尺
    return my;
  };

  // 其他getter/setter方法...

  return my;
}

关键细节解释 #

1. 原始比例尺副本：xScaleOriginal始终保留最开始的比例尺状态，不会被缩放操作修改，确保每次缩放计算都是从“基准线”出发。
2. 独立的变换状态：currentZoomTransform专门记录当前的缩放和平移状态，每次缩放事件只更新这个变量，而不是直接修改比例尺。
3. 重绘时的比例尺计算：每次重绘都用currentZoomTransform.rescaleX(xScaleOriginal)生成当前需要的比例尺，这样就彻底避免了变换的累积叠加。

额外注意事项 #

• 如果需要对y轴做语义缩放，完全可以用同样的逻辑维护yScaleOriginal和对应的变换状态。
• scaleExtent的范围可以根据你的业务需求调整，避免过度缩放导致的异常显示。

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