d3 同步 2 个独立的缩放行为

我有以下 d3/d3fc 图表

https://codepen.io/parliament718/pen/BaNQPXx https://codepen.io/parliament718/pen/BaNQPXx

该图表的主要区域有缩放行为，y 轴有单独的缩放行为。 可以拖动 y 轴来重新缩放。

我无法解决的问题是，拖动 y 轴重新缩放并随后平移图表后，图表中出现“跳跃”。

显然，这两个缩放行为存在脱节，需要同步，但我正在绞尽脑汁试图解决这个问题。

const mainZoom = zoom()
    .on('zoom', () => {
       xScale.domain(t.rescaleX(x2).domain());
       yScale.domain(t.rescaleY(y2).domain());
    });

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

const yAxisDrag = drag()
    .on('drag', (args) => {
        const factor = Math.pow(2, -event.dy * 0.01);
        plotArea.call(yAxisZoom.scaleBy, factor);
    });

所需的行为是缩放、平移和/或重新缩放轴，以始终从上一个操作完成的位置应用变换，而无需任何“跳跃”。

好的，所以我又尝试了一次 - 正如我的之前的回答 https://stackoverflow.com/a/61073772/249933，您需要克服的最大问题是 d3-zoom 只允许对称缩放。这是已经存在的事情广泛讨论 https://github.com/d3/d3-zoom/issues/48，我相信 Mike Bostock 将在下一个版本中解决这个问题。

因此，为了解决这个问题，您需要使用多次缩放行为。我创建了一个包含三个图表，一个用于每个轴，一个用于绘图区域。 X 和 Y 缩放行为用于缩放轴。每当 X 和 Y 缩放行为引发缩放事件时，它们的平移值都会复制到绘图区域。同样，当绘图区域发生平移时，x 和 y 分量将被复制到各自的轴行为。

绘图区域的缩放有点复杂，因为我们需要保持纵横比。为了实现这一点，我存储之前的缩放变换并使用比例增量来计算出合适的比例以应用于 X 和 Y 缩放行为。

为了方便起见，我将所有这些都包装到一个图表组件中：

const interactiveChart = (xScale, yScale) => {
  const zoom = d3.zoom();
  const xZoom = d3.zoom();
  const yZoom = d3.zoom();

  const chart = fc.chartCartesian(xScale, yScale).decorate(sel => {
    const plotAreaNode = sel.select(".plot-area").node();
    const xAxisNode = sel.select(".x-axis").node();
    const yAxisNode = sel.select(".y-axis").node();

    const applyTransform = () => {
      // apply the zoom transform from the x-scale
      xScale.domain(
        d3
          .zoomTransform(xAxisNode)
          .rescaleX(xScaleOriginal)
          .domain()
      );
      // apply the zoom transform from the y-scale
      yScale.domain(
        d3
          .zoomTransform(yAxisNode)
          .rescaleY(yScaleOriginal)
          .domain()
      );
      sel.node().requestRedraw();
    };

    zoom.on("zoom", () => {
      // compute how much the user has zoomed since the last event
      const factor = (plotAreaNode.__zoom.k - plotAreaNode.__zoomOld.k) / plotAreaNode.__zoomOld.k;
      plotAreaNode.__zoomOld = plotAreaNode.__zoom;

      // apply scale to the x & y axis, maintaining their aspect ratio
      xAxisNode.__zoom.k = xAxisNode.__zoom.k * (1 + factor);
      yAxisNode.__zoom.k = yAxisNode.__zoom.k * (1 + factor);

      // apply transform
      xAxisNode.__zoom.x = d3.zoomTransform(plotAreaNode).x;
      yAxisNode.__zoom.y = d3.zoomTransform(plotAreaNode).y;

      applyTransform();
    });

    xZoom.on("zoom", () => {
      plotAreaNode.__zoom.x = d3.zoomTransform(xAxisNode).x;
      applyTransform();
    });

    yZoom.on("zoom", () => {
      plotAreaNode.__zoom.y = d3.zoomTransform(yAxisNode).y;
      applyTransform();
    });

    sel
      .enter()
      .select(".plot-area")
      .on("measure.range", () => {
        xScaleOriginal.range([0, d3.event.detail.width]);
        yScaleOriginal.range([d3.event.detail.height, 0]);
      })
      .call(zoom);

    plotAreaNode.__zoomOld = plotAreaNode.__zoom;

    // cannot use enter selection as this pulls data through
    sel.selectAll(".y-axis").call(yZoom);
    sel.selectAll(".x-axis").call(xZoom);

    decorate(sel);
  });

  let xScaleOriginal = xScale.copy(),
    yScaleOriginal = yScale.copy();

  let decorate = () => {};

  const instance = selection => chart(selection);

  // property setters not show 

  return instance;
};

这是一支带有工作示例的笔：

https://codepen.io/colineberhardt-the-bashful/pen/qBOEEGJ https://codepen.io/colineberhardt-the-bashful/pen/qBOEEGJ