Ionic 6(Angular)中D3.js无法同时实现拖拽与缩放的问题

D3的drag和zoom行为会抢占鼠标/触摸事件，当其中一个交互被触发后，另一个的事件监听器会被D3的事件机制抑制，导致互斥失效。这是因为两者都依赖相同的底层事件（如mousedown/touchstart），启动一个交互后会阻止另一个的事件传播。

不需要同时使用drag和zoom，可以把旋转逻辑整合到zoom行为中，利用zoom本身的事件来区分缩放和拖拽操作。这样既避免事件冲突，又能统一处理交互。

修改后的代码如下：

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 currentRotate = projection.rotate(); // 维护当前旋转状态

const path = d3.geoPath()
    .projection(projection); // 只创建一次path，后续更新投影即可

const svg: any = d3.select('#globe')
    .append('svg')
    .attr('width', w)
    .attr('height', h);

const map = svg.append('g');

// 移除单独的drag，整合到zoom中
const zoom: any = d3.zoom()
    .scaleExtent([0.3, 10]) // 直接把最小缩放设为0.3，避免额外判断
    .on('zoom', (event) => {
        const transform = event.transform;
        
        // 处理缩放：只有scale变化时更新投影缩放
        if (transform.k !== 1) {
            projection.scale(initialScale * transform.k);
        }

        // 处理拖拽旋转：利用translate的变化计算旋转角度
        const k = sensitivity / projection.scale();
        currentRotate = [
            currentRotate[0] + transform.x * k,
            currentRotate[1] - transform.y * k
        ];
        projection.rotate(currentRotate);

        // 更新所有路径
        svg.selectAll('path').attr('d', path);
        map.attr('r', projection.scale());

        // 重置zoom的translate，避免累积偏移（因为我们用translate来计算旋转，不需要实际平移元素）
        event.sourceEvent.preventDefault();
        svg.transition().duration(0).call(zoom.transform, d3.zoomIdentity);
    });

svg.call(zoom).on('dblclick.zoom', null);

• 移除独立drag行为：将旋转逻辑合并到zoom的回调中，避免事件冲突。
• 维护旋转状态：用currentRotate变量保存当前旋转角度，避免每次重置。
• 区分缩放与拖拽：通过transform.k判断缩放操作，通过transform.x/transform.y计算旋转偏移。
• 重置zoom变换：在处理完旋转后，将zoom的transform重置为identity，防止translate累积导致后续计算错误。
• 调整scaleExtent：直接将最小缩放设为0.3，去掉冗余的条件判断。

• Ionic的触摸事件可能有默认行为（如滑动返回），可以在pointerdown事件上添加event.preventDefault()来确保D3的事件优先处理。
• 如果需要区分单指拖拽旋转和双指缩放，D3的zoom会自动处理触摸手势，无需额外配置。

内容的提问来源于stack exchange，提问作者Emin Arif