d3 / d3-brush

Select a one- or two-dimensional region using the mouse or touch.
https://d3js.org/d3-brush
ISC License
154 stars 53 forks source link

Brushing uses wrong mouse coordinates if perspective transformations are applied #85

Open s9ferech opened 3 years ago

s9ferech commented 3 years ago

If I zoom in on a visualization through CSS perspective transformations then brushing on that visualizations will behave weird because the wrong mouse coordinates will be used. I created a small example to demonstrate this. When brushing over the circle, the selection does not follow the cursor.

Fil commented 3 years ago

Confirmed in d3v6. Do you have an idea to solve this?

I think the issue is in d3.pointer, not specifically d3.brush.

It's fun to see that it doesn't happen with 2D transforms, like transform: rotate(45deg), where the brush seems to correctly follow the mouse.

mbostock commented 3 years ago

Related https://github.com/d3/d3-selection/issues/67 https://github.com/d3/d3-selection/issues/68 https://github.com/d3/d3-selection/issues/72 https://github.com/d3/d3-selection/issues/81

There’s a long history of browsers not implementing getScreenCTM correctly, and generally speaking I don’t think D3 should attempt to workaround browser bugs or quirks: D3 is not a compatibility layer.

s9ferech commented 3 years ago

The properties MouseEvent.offsetX and MouseEvent.offsetY seem to provide the right coordinates in Chrome and Firefox. I suppose they could be used to fix this without much trouble. But their specification is currently still experimental.