如何在 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"触摸手势的 is 类似于什么？如何在用户在触控板或手机上捏合和拉伸时注册回调？

笔记

• 据推测，可能是这些 touchstart、touchmove、touchend 事件。但

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

  当我捏和拉伸时从不记录。

• 我在 d3v3 中看到过这个块可以实现这一点。

更新

看起来可能是捏合手势被捏合和拉伸捕获的"wheel.zoom"情况d3.event.type == "wheel"。此外，d3.event.deltaZ == 0对于所有这些事件。

Answer 1

事实证明，触控板捏合是作为设置为 True 时发出wheel.zoom的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);
}