D3手动缩放,如何设置翻译进行缩放

Question

我需要手动进行过渡,因为我知道d3变焦,变焦不会听我的手动变焦,所以手动变焦后,当我用鼠标拖动或鼠标滚轮滚动时,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的参考

我手动转换后,任何人都知道正确的缩放翻译值吗？谢谢!

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 是我定义要在zoom事件上调用的函数，您可以将转换添加到该函数中，如下所示：

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

我希望这能够帮到你。