如何在d3.zoom（d3v4 / v5）中捕获捏和拉伸手势事件

Question

背景

我正在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"的相似之处是用于触摸手势吗？如何在用户捏住和伸展触摸板或电话的情况下注册回调？

注释

• 大概是these touchstart, touchmove, touchend events。但是

  svg.call(d3.zoom().on("zoom", zoomed)).on("wheel.zoom", wheeled).on("touchstart.zoom", () => console.log('here'));
  

  当我捏和伸展时，永远不会记录。

• 我见过this block which accomplishes this in d3v3。

更新

似乎在捏捏和拉伸过程中，捏住手势被"wheel.zoom"和d3.event.type == "wheel"抓住了。此外，对于所有这些事件，d3.event.deltaZ == 0。

Answer 1

在wheel.zoom设置为True的情况下，触控板捏缩以d3.event.ctrlKey的形式发出。这就是浏览器已经同意的：

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);
}