Question

我需要手动进行转换，因为我知道d3变焦，变焦不会听我的手动变焦，所以手动变焦后，当我用鼠标拖动或鼠标滚轮滚动时，d3变焦将启动事件从前一个位置（平移）和d3 zoom存储的比例值，它对我的地图来说太可怕了。因此我需要在手动缩放后设置缩放平移和缩放，我可以设置缩放比例，但我不知道设置缩放平移的值。

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

我希望这会帮助你。

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

1 个答案: