D3: Zoom не сбрасывает масштаб

У меня есть простая диаграмма с смоделированными данными в реальном времени. Вы можете включать и выключать рисунок. Когда рисование выключено, вы можете увеличивать и уменьшать масштаб.

https://codesandbox.io/s/wqyz1q3o45

Вот в чем проблема:

1. Подождите некоторое время, чтобы на экране появились данные
2. Нажмите «Переключить», чтобы прекратить рисование новых данных.
3. Увеличение (колесо мыши или двойной щелчок) и уменьшение
4. Нажмите «Переключить», чтобы снова начать рисование.

Вы можете видеть, что леска съедается слева. Это потому, что весы не сбрасываются.

Вот метод render

public render(data: ISample[]) {
  this.xScale.domain(extent(data, d => d.timestamp) as [number, number]);
  this.yScale.domain(extent(data, d => d.value) as [number, number]);

  this.xAxisGroup.call(this.xAxis as any);
  this.yAxisGroup.call(this.yAxis as any);

  this.xGridGroup.call(this.xGrid as any);
  this.yGridGroup.call(this.yGrid as any);

  this.lineGroup.datum(data).attr("d", this.line);
}

И метод zoom

public zoom = () => {
  const newXScale = event.transform.rescaleX(this.xScale);
  const newYScale = event.transform.rescaleY(this.yScale);

  this.xAxisGroup.call(this.xAxis.scale(newXScale));
  this.yAxisGroup.call(this.yAxis.scale(newYScale));

  this.xGridGroup.call(this.xGrid.scale(newXScale));
  this.yGridGroup.call(this.yGrid.scale(newYScale));

  this.line.x(d => newXScale(d.timestamp)).y(d => newYScale(d.value));

  this.lineGroup.attr("d", this.line as any);
};

Если вместо этого вы используете следующий код в методе render или закомментируете / раскомментируете соответствующие строки, он будет работать.

this.xAxisGroup.call(this.xAxis.scale(this.xScale));
this.yAxisGroup.call(this.yAxis.scale(this.yScale));

this.xGridGroup.call(this.xGrid.scale(this.xScale));
this.yGridGroup.call(this.yGrid.scale(this.yScale));

this.line.x(d => this.xScale(d.timestamp)).y(d => this.yScale(d.value));

Вы можете нажать «Переключить» и увеличивать / уменьшать масштаб сколь угодно сильно.

Зачем нужно сбрасывать весы в методе render? Особенно что-то вроде

this.line.x(d => this.xScale(d.timestamp)).y(d => this.yScale(d.value));

это никогда не меняется. Всегда должно быть одно и то же. Я думал, что уменьшение масштаба снова сбрасывает масштаб до исходного значения.

Спасибо за помощь!