D3比例和平移是偏离目标

时间:2018-05-31 19:29:57

标签: javascript d3.js

我使用鼠标点击位置缩放并平移到地图的特定部分。没有比例,翻译移动到正确的位置。但是,如果我缩放并一起翻译它会错过点击点。我理解为什么,但我不明白如何弥补它:

//get mouse interaction in svg path
let clickPoint = d3.mouse(this);

        if (!d) {
//reset center and zoom level back to sart
            projection.translate([width/2,height/2]).scale(scaleDefault);
            centered = null;
            scaleStartLevel = 1;
        } else {
            let translate = projection.translate();

//calc scale if the user hasn't zoomed to max zoom more
            let getScale = scaleStartLevel < scaleMaxLevels ? projection.scale() + (scaleInc*scaleStartLevel) : projection.scale();

            scaleStartLevel++;

//scale the map to the zoom level and translate to click point
             projection.scale(getScale)
            .translate([
              translate[0] - clickPoint[0] + width / 2,
              translate[1] - clickPoint[1] + height / 2
            ]);
            centered = d;
        }

//move the map
        map.selectAll("path").transition()
        .duration(750)
        .attr("d", path);

0 个答案:

没有答案