捏缩放和拖动d3.js

Question

我正在尝试在移动设备上实现双指缩放，但是用一个手指（而不是2个手指）拖动应该会产生不同的行为。

我尝试结合使用d3-zoom和d3-drag。尽管我的解决方案可在桌面上正常运行且事件已正确触发，但在移动设备上却无法正常工作。

这是一个重现我的问题的简单示例：在移动缩放和拖动上，红色矩形无效。

https://jsbin.com/fosewiniqi

OrderedDict([('0.jpg', None),
             ('1.jpg', None),
             ('2.jpg', None),
             ('3.jpg', None),
             ('4.jpg', None),
             ('5.jpg', None),
             ('6.jpg', None),
             ('7.jpg', None),
             ('8.jpg', None),
             ('9.jpg', None),
             ('10.jpg', None),
             ('11.jpg', None),
             ('12.jpg', None),
             ('13.jpg', None),
             ('14.jpg', None),
             ('15.jpg', None),
             ('16.jpg', None),
             ('17.jpg', None),
             ('18.jpg', None),
             ('19.jpg', None),
             ('20.jpg', None)])

d3.select("#a")
.call(d3.drag().on("drag", drag))
.call(d3.zoom().on("zoom", zoom))

d3.select("#b")
.call(d3.zoom().on("zoom", zoom))


function zoom() {
d3.select(this).select("p").text(`zooming`);
}

function drag() {
d3.select(this).select("p").text(`dragging`);
}

body {
}
#a {
 width:100vh;
  height:50vh;
  background:red;
}

#b {
  width:100vh;
  height:50vh;
  background:blue;
}