D3.js v7 更新图表时如何编程式保留原有缩放状态

更新重绘后缩放状态重置，本质是两个操作逻辑有问题：

1. 重绘时直接把x轴比例尺的域重置为全量数据范围，没有保留缩放后的比例尺状态
2. 重绘后没有把已有的缩放变换状态同步回d3.zoom实例，zoom内部状态回到初始值，自然会展示全量范围

• 首先在实例上新增属性存储当前缩放状态，在zoomed_回调里实时更新这个值

// 初始化的时候加个属性存缩放状态，初始值为null
this.currentZoomTransform_ = null;

zoomed_(event) {
  // 同步存下最新的变换状态
  this.currentZoomTransform_ = event.transform;
  // 你原有的缩放处理逻辑，比如基于原始x轴生成缩放后的比例尺
  const zoomedX = event.transform.rescaleX(this.baseXScale);
  // 后续用zoomedX更新坐标轴、绘制图形元素即可
}

• 改造update重绘逻辑，不要无脑重置比例尺
  1. 首次加载/无缩放状态时：正常用全量数据的时间范围设置this.baseXScale的原始域，按初始逻辑渲染
  2. 已存在缩放状态时：不要修改this.baseXScale的原始域，直接用之前缩放生成的比例尺（或者基于存的currentZoomTransform_重新生成缩放后的比例尺）计算元素位置、更新坐标轴
• 重绘完成后，主动把存储的缩放状态同步给zoom实例，避免内部状态和视图不一致

// update方法最后加这段
if (this.currentZoomTransform_) {
  this.svg_.call(this.zoom_.transform, this.currentZoomTransform_);
}

如果新接入的数据会扩展全量时间范围（比如新增了比当前最早时间更早、比最晚时间更晚的数据点），但你需要保持当前可视的日期窗口完全不变，可以按下面逻辑处理：

// 重绘前先取出当前可视的日期区间
const [visibleStart, visibleEnd] = this.currentZoomTransform_
  .rescaleX(this.baseXScale)
  .domain();

// 正常更新baseXScale的全量域为新数据的完整时间范围
this.baseXScale.domain(newFullDateRange);

// 根据新的原始比例尺，计算保持可视区间不变对应的新缩放变换
const newTransform = d3.zoomIdentity
  .scale(chartWidth / (this.baseXScale(visibleEnd) - this.baseXScale(visibleStart)))
  .translate(-this.baseXScale(visibleStart), 0);

// 更新存储的缩放状态
this.currentZoomTransform_ = newTransform;
// 后续正常用newTransform生成缩放比例尺重绘即可

• 不要在update方法里重新初始化d3.zoom()实例，也不要重复执行this.svg_.call(this.zoom_)绑定事件，会清空已有的缩放状态
• 所有和缩放相关的比例尺变换，都基于固定的baseXScale（原始全量域的比例尺）做处理，不要直接修改baseXScale的域来实现缩放，不然状态会乱

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