javascript - 如何在 d3.zoom (d3v4/v5) 中捕捉捏合和拉伸手势事件
问题描述
背景
我正在我的 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);
}
问题
我想允许用户使用捏合和拉伸触摸手势来缩放经典意义上的 svg。"wheel.zoom"
触摸手势的类比是什么?如何注册用户在触控板或手机上捏和拉伸的回调?
笔记
据推测,可能是这些 touchstart、touchmove、touchend 事件。但
svg.call(d3.zoom().on("zoom", zoomed)).on("wheel.zoom", wheeled).on("touchstart.zoom", () => console.log('here'));
当我捏和拉伸时从不记录。
更新
看起来可能是捏合手势被捏合和拉伸捕捉到"wheel.zoom"
了d3.event.type == "wheel"
。此外,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);
}
推荐阅读
- dart - 为什么不能以任何方式修改 const 列表时不能在字符串文字中使用它?
- python - VSCode python重构:重命名符号不适用于类运算符实现中的属性
- r - 具有第三个变量 R 平均值的双向表
- javascript - useSelector 在一个页面中返回初始状态,在其他页面中返回正确状态
- kubernetes - 等待服务部署到 K8s
- javascript - 如何从 node.js webapp 中的 mysql 查询重定向?
- r - gglasso - x 和 y 有不同的行数 [R]
- javascript - Apollo GraphQL - TypeError:无法读取未定义的属性“findOrCreateUser”
- loops - Picat中的分区函数P
- python - 在单词列表pyspark中过滤列值的行