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