Comments (1)
Dragging the trackpad with two fingers will emit a wheel
event, which is equivalent to scrolling the mouse wheel. There is no perfect way to distinguish trackpad dragging from mouse wheel scrolling.
So, supporting panning with two fingers will also make mouse wheel scrolling to pan instead of zoom, which can be unexpected.
But if this is what you want, you could refer to the panOnScroll
mode in https://github.com/wbkd/react-flow/blob/main/packages/core/src/container/ZoomPane/index.tsx, which achieves the behavior by replacing the wheel.zoom
handler.
I've made a simpler code snippet based on the link above, by removing some sanity checks:
selection
.call(zoom)
// Override the default wheel event listener
.on("wheel.zoom", (event: WheelEvent) => {
event.preventDefault();
const currentZoom = selection.property("__zoom").k || 1;
if (event.ctrlKey) {
// Use mouse wheel + ctrl key, or trackpad pinch to zoom.
const nextZoom = currentZoom * Math.pow(2, -event.deltaY * 0.01);
zoom.scaleTo(selection, nextZoom, pointer(event));
} else {
// Use mouse wheel or trackpad with 2 fingers to pan.
zoom.translateBy(
selection,
-(event.deltaX / currentZoom),
-(event.deltaY / currentZoom)
);
}
});
from d3-zoom.
Related Issues (20)
- svg.call(d3.zoom().on('zoom',function(){})) warning : Argument of type 'ZoomBehavior<Element, unknown>' is not assignable to parameter of type '(selection: Selection<BaseType, unknown, HTMLElement, any>, ...args: any[]) => void'. HOT 2
- Option to pan with trackpad scroll and zoom with pinch? HOT 1
- Predefined events override manual transformations
- Mismatched link in README HOT 2
- documentation for zoom.on does not provide sufficient information to understand its use HOT 2
- Filtering doesn't work as expected for mouse events on macOS HOT 2
- Default zoom tween for translation animation surprising / More control over zoom animation tweens wanted HOT 2
- Zoom event listeners are passed an incorrect sourceEvent if a programmatic zoom occurs during a user zoom gesture
- Listen for zoom events with without d3-selection? HOT 2
- Zoom "end" is not called when pinch zooming and you start the zoom with the 2nd finger outside the chart HOT 2
- Navigator.maxTouchPoints is always 0 and should not be used
- selection.interrupt is not a function,
- iPhone Performance issues since iOS 16 HOT 1
- Zoom performance issues from iOS 16 onwards HOT 3
- function scale in Transform should support kX and kY instead of k HOT 1
- First zoom doesn't move scale to within scaleExtent HOT 2
- Referencing width on SVGElement when expected type is actually SVGSVGElement HOT 1
- Zoom Behaviour: disabling zoom.click and zoom.dblclick doesn't actually stop zoom behaviour from firing.
- select(...).transition is not a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-zoom.