D3-zoom - 在拖动和平移之间切换时视图跳转

Question

我遇到了 d3-zoom 的问题，这让我很头疼。

这是一个代码笔：https ://codepen.io/parliament718/pen/BaNQPXx

Y 轴可以拖动它来重新缩放。

问题是，如果我拖动/重新缩放它，然后平移图表，则会出现不需要的“跳跃”。

我不明白如何保持我的 2 个缩放行为同步。

const zoom = d3.zoom()
  .on('zoom', () => {
    const t = d3.event.transform;
    x.domain(t.rescaleX(x2).domain());
    y.domain(t.rescaleY(y2).domain());
    render();
  });

const yAxisZoom = d3.zoom()
  .on('zoom', () => {
    y.domain(d3.event.transform.rescaleY(y2).domain());
    render();
  });

const yAxisDrag = d3.drag()
  .on('drag', () => {
    const factor = Math.pow(2, -d3.event.dy * 0.01);
    d3.select('#zoom-chart .plot-area').call(yAxisZoom.scaleBy, factor);
  });