Question

我在尝试让拖动和缩放事件都在触控设备上运行时遇到问题。我不确定的一件事是，对一个选择进行两次调用是否正确。

使用当前代码（仅限摘录）拖动适用于移动设备和桌面设备（Safari和Chrome），但是，使用滚轮在桌面上进行缩放时，双击或捏合对移动设备没有任何影响。

提前感谢您提供任何帮助！

this.projection = d3.geoOrthographic()
    .translate([this.width / 2, this.height / 2])
    .scale(this.defaultScale)
    .rotate(this.rotate)
    .center(this.center)
    .clipAngle(90)

this.path = d3.geoPath()
    .projection(this.projection)

this.zoomEvent = d3.zoom()
    .scaleExtent([1, 100])
    .on("zoom", (k) => {
        let scale = (d3.event.transform.k > this.lastScale)
            ? this.projection.scale() + (d3.event.transform.k * 10)
            : this.projection.scale() - (d3.event.transform.k * 10) 

        this.projection.scale( scale );
        this.redraw();

        this.currentScale = this.projection.scale();
        this.lastScale = d3.event.transform.k;
    });

this.dragEvent = d3.drag()
    .subject((d)=> {
        let r = this.projection.rotate(); 
        return {
            x: r[0] / this.sens, 
            y: -r[1] / this.sens
        };
    })
    .on("drag",() => {
        this.projection.rotate([d3.event.x * this.sens, -d3.event.y * 
        this.sens, this.projection.rotate()[2] ]);
        this.redraw();
    })
})

 this.svg = d3.select("#map-area").append("svg")
     .attr("id", "map")
     .attr("width", this.width)
     .attr("height", this.height)
     .append('g')
     .call(this.dragEvent)
     .call(this.zoomEvent)

D3.js在正交图上捏缩放和拖动

0 个答案: