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”

对触摸手势的模拟是什么？如何在用户的触控板或手机上挤压和拉伸时注册回调

笔记

• 大概是吧。但是
  当我掐和伸的时候，不要用圆木

• 我见过

更新

---

似乎在挤压和拉伸时，“wheel.zoom”和

d3.event.type==“wheel”

捕捉到了挤压手势。此外，对于所有这些事件，

d3.event.deltaZ==0

结果是，当

d3.event.ctrlKey

设置为True时，

wheel.zoom

会发出触控板挤压。这是浏览器同意的：

很不直观，但你已经知道了

这是我的最终代码：

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

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