Question

我有一张使用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" ...>
            ...

我已经完成了标准的平移/缩放设置，它设置了<g class="zoomgroup">的transform属性。代码（略微清理）是：

// 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);
}

full code at this commit is on github。

缩放工作正常，当您处于初始规模时也可以进行平移。

当你放大（比例> 1）时，平移是“慢” - 鼠标比地图移动得更远，并且你放大得越远就会变得越来越糟。

缩小（缩放＆lt; 1）时，d3.event.translate数字很容易达到15000左右，此时地图就在屏幕外。（这就是为什么我添加了最小/最大代码，以阻止地图消失）。

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

那么你可以帮我在放大或缩小时获得平滑的平移效果吗？

Answer 1

您应该尝试使用svg.call(zoom);代替zoomg.call(zoom);。

d3.js和svg：放大/缩小时平移不起作用

1 个答案: