我无法在d3.js中同时拖动和缩放(Ionic 6:Angular )

xwbd5t1u  于 2023-02-20  发布在  Ionic
关注(0)|答案(1)|浏览(203)

当我第一次调用拖动时,缩放不起作用。当我第一次调用缩放时,拖动不起作用。
我写这些代码与离子框架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. jssvg.call(),但是我不能同时运行这两个函数。

k75qkfdt

k75qkfdt1#

我解决了这个问题,在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))

**重要提示:**必须先调用缩放,然后拖动。

相关问题