D3-在d3v5中具有拖动的y轴

Question

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

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

这是在d3v5，我使用d3缩放，用d3.event.transform重新缩放轴。但是，在d3-拖动中没有d3.event.transform，所以我不明白什么是等价物逻辑使用d3-拖动提供的鼠标坐标。

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域的缩放行为。然后，在拖动处理程序中，使用基于拖动事件的增量Y的缩放因子在绘图区域调用新行为的scaleBy：

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