D3手动缩放，如何设置缩放的平移？

Question

D3手动缩放，如何设置缩放的平移？

8

我需要手动进行过渡，因为我知道d3缩放不会响应我的手动缩放。因此，在手动缩放后，当我使用鼠标拖动或滚动鼠标时，d3缩放将从先前位置（平移）和缩放值开始事件，这对我的地图来说是可怕的。所以我需要在手动缩放后设置缩放平移和比例，我可以设置缩放比例，但我不知道要设置缩放平移的值。

       g.transition()
        .duration(1000)
        .attr("transform", "translate(" + (window_width / 2 + translateX) + "," + (window_height / 2 ) + ")scale(" + zoomLevel + ")translate(" + (-x + 10) + "," + -y + ")")
        .each("end", function () {
            if (zoomLevel > 1) {
                $("#zoom_control").show();
                showCenteredTextInCircle();
                // zoom.scale(zoomLevel);
                // zoom.translate([x*zoomLevel, y*zoomLevel]);
            }
        });

这段代码参考自d3-zoom-example

有没有人知道在我手动过渡后正确的缩放平移值？谢谢！！！

- Awakening

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriel · Accepted Answer

缩放比例和平移比例存储在您的缩放对象中。我猜您有一行代码看起来像：

var zoom = d3.behavior.zoom()
             .translate([0, 0])
             .scale(1).scaleExtent([1, 3])
             .on("zoom", zoomed);

您可以为首次设置初始缩放和平移值，这种定义可以帮助您限制缩放比例和初始平移（如果缩放比例为1或缩放事件开始时）。请注意，所有这些都是可选的，您可以只使用这种类型的定义：

var zoom = d3.behavior.zoom();

所以，从该对象获取比例和平移是很简单的：

var scale=zoom.scale(); var position=zoom.translate();

如果您想手动进行过渡或手动进行缩放，您需要使用此函数：

function interpolateZoom(translate, scale) {

                return d3.transition().duration(150).tween("zoom", function() {
                    var iTranslate = d3.interpolate(zoom.translate(), translate),
                        iScale = d3.interpolate(zoom.scale(), scale);

                    return function(t) {
                        zoom.scale(iScale(t)).translate(iTranslate(t));
                    };
                });
            };

zoomed 是我定义的一个函数，在缩放事件中调用，你可以在这个函数中添加你的翻译，它应该如下所示：

function zoomed() {
      g.transition().duration(1000)
        .attr("transform", "translate(" + (window_width / 2 + translateX) + "," + (window_height / 2 ) + ")scale(" + zoomLevel + ")translate(" + (-x + 10) + "," + -y + ")")
        .each("end", function () {
            if (zoomLevel > 1) {
                $("#zoom_control").show();
                showCenteredTextInCircle();
                interpolateZoom([x*zoomLevel, y*zoomLevel],zoomLevel);
                // zoom.scale(zoomLevel);
                // zoom.translate([x*zoomLevel, y*zoomLevel]);
            }
        });
    }

我希望这能对你有所帮助。