我无法在 d3 中同时拖动和缩放.js(离子 6：棱角分明)

Question

当我首先调用拖动时，缩放不起作用。当我第一次调用缩放时，拖动不起作用。

我正在用Ionic Framework 6版本(Angular)编写这些代码。

const w = window.screen.width;
const h = window.screen.height;
const scl: any = Math.min(w, h) / 2.5;
const sensitivity = 75;
const projection: any = d3.geoOrthographic()
.scale(scl)
.translate([ w/2, h/2 ]);
const initialScale = projection.scale();
let path = d3.geoPath()
.projection(projection);
const svg: any = d3.select('#globe')
.append('svg')
.attr('width', w)
.attr('height', h);
const map = svg.append('g');
const drag: any = d3.drag()
.on('drag', (event) => {
const rotate = projection.rotate();
const k = sensitivity / projection.scale();
projection.rotate([
rotate[0] + event.dx * k,
rotate[1] - event.dy * k
]);
path = d3.geoPath().projection(projection);
svg.selectAll('path').attr('d', path);
});
svg.call(drag);
const zoom: any = d3.zoom()
.scaleExtent([1, 10])
.on('zoom', (event) => {
if (event.transform.k > 0.3) {
projection.scale(initialScale * event.transform.k);
path = d3.geoPath().projection(projection);
svg.selectAll('path').attr('d', path);
map.attr('r', projection.scale());
} else {
event.transform.k = 0.3;
}
});
svg.call(zoom).on('dblclick.zoom', null);

提前感谢。

我尝试map.call()而不是hammer.js和svg.call()，但我不能同时运行这两个功能。

Answer 1

我解决了这个问题。在d3.js，我给添加了一个滤镜缩放和拖动，并让他们根据触摸的次数做出反应。

缩放过滤

const zoom: any = d3.zoom()
.filter((event) => event.touches && event.touches.length === 2)

拖动过滤

const drag: any = d3.drag()
.filter((event) => !(event.touches && event.touches.length === 2))

重要:必须先调用缩放，然后再调用拖动。