d3-drag - изменить масштаб оси y с помощью перетаскивания в d3v5

Question

Я пытаюсь добиться эффекта масштабирования декартовой диаграммы d3f c, когда пользователь перетаскивает вдоль осей.

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

Это находится в d3v5, и я использую d3-zoom для масштабирования осей, используя d3.event.transform. Тем не менее, в d3-drag нет d3.event.transform, поэтому я не понимаю, какие логики equivelant c будут использовать только координаты мыши, которые обеспечивает 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 в области графика с масштабным коэффициентом, основанным на дельте 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);
  });