javascript - 相同比例的 d3.jzoom 无法正常工作

Question

我正在为我的地图使用 d3.zoom。由于某种原因，我不明白某些特定比例级别的缩放功能无法正常工作。就在地图的右侧？？？右边有某种翻译，我不能再平移我的地图了。

这是我的 svg 地图的 js。

import * as d3 from "d3"; export default {
name: "KartaHrvatske",
props: ["name"],
mounted(){
    var svg = d3.select("#map") 
    const zoom = d3.zoom()
                   .translateExtent([[0,0],[10000000,8200000]])
                   .scaleExtent([1, 10])
                   .on("zoom", zoomed)
                   
    svg.call(zoom) 

    function zoomed({transform}){
        svg.select("#wrap").attr("transform", transform)
    }
} }

我正在将我的地图的 gif 捕获，左侧缩放工作正常

地图的右侧有某种翻译

有谁知道为什么会这样，我该怎么办？我正在使用 vue 框架。

标签： javascriptvue.jssvgd3.js