Programmatically zooming to prior zoom state [v7]-CodePudding

I have a zoom behaviour enabled on a timeline chart, that calls a zoomed_ method.

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

this.svg_.call(this.zoom_);

The issue I'm facing is that I need to call an update function on this chart that will re-draw the chart whenever new data comes in. Sometimes I want to to this while having zoomed in.

However, this update makes the timeline go back to displaying the entire range of dates that is present on the data, ignoring the state of the zoom.

Ideally, I'd like to be able to keep the zoom where it is, and observe the data change within the current dates in view.

This seems like it could be accomplished by programmatically calling the zoom function with the latest "zoom state", but it's not obvious to me how to go about that.

CodePudding user response：

Ended up triggering a programmatic zoom event after each update to recover the state of the zoom, which I store whenever an actual zooming takes place:

...

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

And then, whenever the charts need to be updated I do:

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));