d3.js 可编程缩放至之前的缩放状态[v7]

ltskdhd1  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(163)

我在时间轴图表上启用了一个缩放行为,它调用了zoomed_方法。

this.zoom_ = d3.zoom()
                     .extent([
                       [chartLeftMargin, 0],
                       [chartWidth, chartHeight]
                     ])
                     .on('zoom', (event) => this.zoomed_(event));

this.svg_.call(this.zoom_);

我面临的问题是,我需要在这个图表上调用一个update函数,每当有新数据进入时,这个函数就会重新绘制图表。有时我想在放大的时候重新绘制图表。
但是,此更新会使时间线返回到显示数据上存在的整个日期范围,而忽略缩放状态。
理想情况下,我希望能够保持缩放,并观察视图中当前日期内的数据变化。
这看起来像是可以通过以编程方式调用带有最新“缩放状态”的缩放函数来实现的,但我并不清楚该如何去做。

pzfprimi

pzfprimi1#

每次更新后都会触发一个程序化缩放事件来恢复缩放的状态,每当实际缩放发生时,我都会存储缩放状态:
...

zoomed_(event) {
  ...
  this.zoom_event_ = event;
  ...
}

然后,每当图表需要更新时,我都会:

this.svg_.call(
  this.zoom_.transform,
  d3.zoomIdentity
    .translate(this.zoom_event_.transform.x, this.zoom_event_.transform.y)
    .scale(this.zoom_event_.transform.k));

相关问题