d3.js - D3手动缩放，如何设置平移缩放

Question

我需要手动做一个过渡，因为我知道d3缩放，缩放不会听我的手动缩放，所以手动缩放后，当我使用鼠标拖动或鼠标滚轮滚动时，d3缩放将从上一个开始事件d3 缩放存储的位置(平移)和比例值，这对我的 map 来说太糟糕了。所以我需要在我手动缩放后设置zoom translate和scale，我可以设置zoom scale，但是我不知道设置zoom translate的值。

       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

有人知道我手动转换后正确的缩放转换值吗？谢谢!!!

Answer 1

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

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

我希望这能够帮到你。