Увеличение и уменьшение масштаба не работает для графика в реальном времени D3

Question

Я создал график в реальном времени d3.Вы можете увидеть это в JSFiddle .

Есть две проблемы:

1 - хотя масштабирование и уменьшение масштаба работают нормально, оно не длится, потому что обновление графика в реальном времени переводит чат обратно в не масштабированное состояние,

Как я могу сделать так, чтобы график сохранял свое увеличенное или уменьшенное состояние после обновления?

Ниже приведен код увеличения и уменьшения, который не работает при обновлении.Для всего примера кода, вы можете перейти к JSFiddle .

Что я ожидаю в этом коде, так это то, что я смогу сохранить позицию в окне просмотра, чтобы при обновлении я мог просто использовать эту позицию и переместить навигационную панель в старое положение.

this.zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [this.width, this.height]])
.extent([[0, 0], [this.width, this.height]])
.on("zoom", ()=> {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") {
    return; // ignore zoom-by-brush
  }
  let t = d3.event.transform;;
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "wheel") {
   thisObj.zoomTransform = d3.event.transform;
   }

 if(thisObj.isToUpdateChart && (typeof thisObj.zoomTransform != 'undefined'))
 {
   //t = this.zoomTransform;
   thisObj.isToUpdateChart = false;
   //this.zoomTransform = undefined;
 }
 else
    thisObj.isToUpdateChart = false;
  thisObj.mainXScale.domain(t .rescaleX(thisObj.navXScale).domain());
  let count = 0;
  thisObj.mainLinePath.forEach(linePath => {
    linePath
    // .attr('transform', null)
    // .transition()
    // .duration(this.duration)
    // .ease(this.transition)
    .attr("d", thisObj.mainChartLine[count]);
    count++;
  });
  thisObj.mainXAxisGroup
  // .transition()
  // .duration(this.duration)
  // .ease(this.transition)
  .call( thisObj.mainXAxis);
  thisObj.navGroup.select(".x.brush")
  .call(thisObj.navXBrush.move, thisObj.mainXScale.range().map(t.invertX, t));
});

2- Я хочу, чтобы иметь возможность перемещаться по основному графику с помощью навигационного графика под ним.Я заставил это работать, поддерживая navViewportLeft и isToUpdateChart позиции view-port (выбранной области от панели навигации).Но я не доволен этим решением.Есть ли лучший способ сделать это?