背景
我正在将多个交互构建到我的 d3v5 可视化中。单击并拖动应该让用户平移 svg 容器。滚轮应垂直平移。这两个都有效。
svg.call(d3.zoom().on("zoom", zoomed)).on("wheel.zoom", wheeled);
function zoomed() {
current_transform = d3.zoomTransform(g);
current_transform.x += d3.event.sourceEvent.movementX;
current_transform.y += d3.event.sourceEvent.movementY;
g.attr("transform", current_transform);
}
function wheeled() {
current_transform = d3.zoomTransform(g);
current_transform.y = current_transform.y - d3.event.deltaY;
g.attr("transform", current_transform);
}
问题
我想允许用户使用捏合和拉伸(stretch)触摸手势来缩放经典意义上的 svg。 “wheel.zoom”
的模拟是什么用于触摸手势?如何在用户在其触控板或手机上捏合和拉伸(stretch)时注册回调?
注意事项
大概是these touchstart, touchmove, touchend events .但是
svg.call(d3.zoom().on("zoom", zoomed)).on("wheel.zoom", wheeled).on("touchstart.zoom", () => console.log('here'));
当我捏和拉伸(stretch)时从不记录。
更新
看起来可能是捏合手势被 "wheel.zoom"
和 d3.event.type == "wheel"
捕获了捏和拉伸(stretch)。此外,所有这些事件的 d3.event.deltaZ == 0
。
最佳答案
事实证明,触控板捏合是作为 wheel.zoom
发出的,其中 d3.event.ctrlKey
设置为 True。这是浏览器同意的:
https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
非常不直观,但您已经知道了。
这是我的最终代码:
svg.call(d3.zoom().on("zoom", zoomed)).on("wheel.zoom", wheeled);
transform = d3.zoomTransform(g);
transform.x += margin.left;
transform.y += margin.top;
g.attr("transform", transform);
function zoomed() {
current_transform = d3.zoomTransform(g);
current_transform.x += d3.event.sourceEvent.movementX;
current_transform.y += d3.event.sourceEvent.movementY;
g.attr("transform", current_transform);
}
function wheeled() {
current_transform = d3.zoomTransform(g);
if (d3.event.ctrlKey) {
current_transform.k = current_transform.k - d3.event.deltaY * 0.01;
} else {
current_transform.y = current_transform.y - d3.event.deltaY;
}
g.attr("transform", current_transform);
}
关于javascript - 如何在 d3.zoom (d3v4/v5) 中捕获捏拉手势事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52130484/