Javascript d3.js和svg：放大/缩小时平移不'；行不通

我用d3在SVG中绘制了一张地图，SVG在一个视图框中，类似于：

<svg id="mapcanvas" class="map-svg flow" viewBox="60 -20 800 500">

    <defs>...</defs>
    <g class="zoomgroup" transform="translate(300,162.02921295166016)scale(0.5)">
        <rect class="mapocean" width="150%" height="150%" y="-150"></rect>
        <g class="mapgroup">
            <path class="country AF" ...>
            ...

...
...

我已经完成了标准的平移/缩放设置，它设置了

的变换属性。代码（稍微清理）为：

//zoomg是一个d3对象，表示上述内容
var setupZoom=函数（zoomg）{
var zoomed=函数（）{
var translate=d3.event.translate，
比例=d3.event.scale；
translate[0]=数学最大值（-600*刻度，数学最小值（600*刻度，translate[0]）；
translate[1]=Math.max（-350*刻度，Math.min（350*刻度，translate[1]）；
zoomg.attr（“变换”、“平移”（+translate+））比例（+scale+））；
},
zoom=d3.behavior.zoom（）
.translate（[0，0]）
.比额表（1）
.scaleExtent（[0.5,20]）
。打开（“缩放”，缩放）；
缩放调用（缩放）；
}

这个

缩放效果很好，在初始比例时平移效果也很好

放大（比例>1）时，平移速度“慢”-鼠标移动得比贴图移动得更远，放大得越远，平移速度越差

当您缩小（比例<1）时，d3.event.translate的数字很容易达到15000左右，此时地图在屏幕之外。（这就是为什么我添加了min/max代码，以阻止贴图消失）

所以我真的不明白d3.event.translate数字在做什么，或者它们是如何生成的，以及它们与viewbox的关系。我应该在d3.behavior.zoom（）调用中添加x（）和y（）函数吗？如果是，这些功能应该是什么

---

因此，您能帮助我在放大或缩小时获得平滑的平移效果吗？

您应该尝试使用

svg.call（缩放）而不是
zoomg.call（缩放）
您的意思是我应该缩放整个SVG，而不仅仅是一个
元素吗？我确实有意只缩放SVG的一个元素——那么D3缩放/平移是否只适用于整个SVG？如果这是唯一的方法，我可以将应用程序重构为几个不同的SVG。
// zoomg is a d3 object represent the <g class="zoomgroup"> above
var setupZoom = function(zoomg) {
    var zoomed = function() {
        var translate = d3.event.translate,
            scale = d3.event.scale;
        translate[0] = Math.max(-600*scale, Math.min(600*scale, translate[0]));
        translate[1] = Math.max(-350*scale, Math.min(350*scale, translate[1]));

        zoomg.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
    },
    zoom = d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .scaleExtent([0.5, 20])
        .on("zoom", zoomed);
    zoomg.call(zoom);
}