d3.js - d3-drag - 在 d3v5 中拖动重新调整 y 轴

Question

当用户沿轴拖动时，我试图实现重新缩放 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?
    });

Answer 1

您可以创建另一个仅更改 Y 域的缩放行为。然后，在拖动处理程序中，调用新行为的 scaleBy在具有基于拖动事件的 delta Y 的比例因子的绘图区域上:

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