[FIXED] Why the D3.js event.transform.rescaleY(yScale) function works differently on wheel and mouse zoom?

Issue

I have a simple plot with the zoom functionality along Y axis. When I use wheel to change the zoom it works OK. But when I use mouse to drag then at the beginning the chart jumps.

Here is the function I use on the zoom event: I guess there should be added some test if the event is wheel or mouse and some more calculations in case of the mouse event.

function zoom(event: any) {
 console.log(event);
 let new_yScale = event.transform.rescaleY(yScale);

 console.log(new_yScale);
 console.log(new_yScale.domain());
 console.log(new_yScale.range());
 setMinY(new_yScale.domain()[0]);
 setMaxY(new_yScale.domain()[1]);
}

I am using D3.js and React.

Code sandbox link:

Application demo:

In the attachment is the gif showing the strange behaviour.

I tried to console.log the event.transform result and noticed the event.transform values are different on wheel event and mouseevent. But I do not know how to recalculate the mouseevent result to be compatible with the wheel.

Solution

I solved it here: https://p89vne.csb.app/

I found this tutorial very useful: https://www.youtube.com/watch?v=dxUyI2wfYSI&list=PLDZ4p-ENjbiPo4WH7KdHjh_EMI7Ic8b2B&index=18

I think the initial example had flaw design ( with recreating the svg every tick) and that was the main problem.

Answered By - paszo
Answer Checked By - - Jay B. (ReactFix Admin)