Weird zoom in/out! about victory HOT 18 OPEN

Mouse wheel events have a deltaX, deltaY, and deltaZ property. I think the code you are looking for is

window.addEventListener("wheel", event => console.log(event.deltaY > 0 ? "scroll-up (zoom-in)" : "scroll-down (zoom-out)")); 

from victory.

The zoom is relative to your cursor position, try zooming out / in with your cursor centered in the graph

from victory.

@carbonrobot first of all, why can I zoom off the chart?
second, it's not about that, watch the screencast more carefully, when I am off the chart, I ONLY zoom out, but the chart is in a loop of zoom-in/out!

from victory.

Your cursor appears to be still over the chart. Remember, the chart has padding all the way around and fills the entire column.

watch the screencast more carefully

Obviously, it is unclear what your mouse is doing, because we can't see what buttons are being pressed via the video.

I am unable to replicate that behaviour using Edge/Chrome/Firefox/Safari.

from victory.

Sure you cannot see what I do with my mouse buttons :D But I'm telling you what I'm doing.

Steps to reproduce:

1. Go inside and zoom in
2. Go in the white part, out of the chart and zoom out a lot

from victory.

Everything appears to be working as intended. The zoom is correct relative to the mouse position in the data points.

Could you describe the behavior you are expecting?

from victory.

what you have done is correct, but zoom out more than that, don't stop zooming out.
to face the issue earlier, you don't need to zoom in a lot, one step is enough.

from victory.

I'm still unclear what you are asking. Are you talking about the numbers repeating due to the datum using Math.Pi and Sin?

from victory.

It's generally about both axises, but in the video you can see x-axis.
In the video below, I ONLY ONCE, scroll up (zoom-in) and after that JUST scroll down (zoom-out).
The scroll down is happening FIRST out of the chart THEN inside and outside of the chart.

from victory.

The video looks normal to me, I'm still unclear on the question.

Here is the charts bounding box (it receives mouse events inside this red border)

Could you describe the problem with the following format?

1. Test steps
2. Expected result
3. Actual result

from victory.

I used this script to show my mouse events :D
window.addEventListener("wheel", event => console.log(event.wheelDelta > 0 ? "scroll-up (zoom-in)" : "scroll-down (zoom-out)"));

Steps:

• ONE zoom in, inside the chart
• MANY zoom outs in the white area (actually zoom out kinda zoom in)

In the video below, there is ONLY ONE zoom in, and after that, all others are zoom out!

from victory.

Don't debug my code snippet, debug the library :D
In both cases, the bug is there and is the same.

from victory.

Do you see the problem in this screen cap? I'm not seeing anything incorrect, but maybe we are talking about different things.

from victory.

yes, I see that :)

when you did 26 scroll-ups, it means ZOOM OUT... but actually the chart zooming in.

To see the bug better, never do scroll-down after the first one. do scroll-down JUST ONCE

from victory.

I'm not seeing a bug, I'm just seeing the designed behavior. Can you describe the actual VS expected behavior?

from victory.

Perhaps there is some confusion in this example because it uses an initial zoom domain (in other words, the charts starts pre-zoomed-in).

You can paste the following code into the "Editable Source" box to see if that changes anything for you.

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    data: this.getScatterData()
  }
  getScatterData() {
    return range(50).map((index) => {
      return {
        x: random(1, 50),
        y: random(10, 90),
        size: random(8) + 3
      };
    });
  }
  render() {
    return (
      <VictoryChart
        containerComponent={<VictoryZoomContainer/>}
      >
        <VictoryScatter
          data={this.state.data}
          style={{
            data: {
              opacity: ({ datum }) =>  datum.y % 5 === 0 ? 1 : 0.7,
              fill: ({ datum }) => datum.y % 5 === 0 ? "tomato" : "black"
            }
          }}
        />
      </VictoryChart>
    );
  }
}
ReactDOM.render(<App/>, mountNode)

I think we are more than happy to change something, we just need to know what you would like changed.

from victory.

same :/

from victory.

@carbonrobot can we meet somewhere? google meet or discord or wherever you can?

from victory.