标签: d3fc

我有以下 d3/d3fc 图表

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

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

我无法解决的问题是，在拖动 y 轴以重新缩放然后平移图表后，图表中有一个“跳跃”。

显然，这 2 个缩放行为有断开连接，需要同步，但我正在绞尽脑汁试图解决这个问题。

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

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

当用户沿轴拖动时，我试图实现重新缩放 d3fc 笛卡尔图的效果。

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

这是在 d3v5 中，我使用 d3-zoom 使用d3.event.transform. 但是，在 d3-drag 中没有，d3.event.transform所以我不明白仅使用 d3-drag 提供的鼠标坐标的等效逻辑是什么。

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

plot.call(zoom);

//What is the equivelant drag action to rescale?
const yAxisDrag = d3.drag()                 
    .on('end', (args) => {
       var t = d3.zoomTransform(plot.node());

       //zoom.translateBy(plot,d3.event.dx/t.k,d3.event.dy/t.k);
       //How can I use zoom.scaleBy() here instead?
    });