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

我需要手动进行转换，因为我知道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]);
            }
        });

此代码来自

---

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

缩放比例和缩放平移存储在缩放对象中。我猜您有一行代码如下所示：

var zoom = d3.behavior.zoom()
             .translate([0, 0])
             .scale(1).scaleExtent([1, 3])
             .on("zoom", 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]);
            }
        });
    }

您可以首次初始缩放和平移值，如果缩放比例为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

是我定义的在缩放事件中调用的函数，您可以将翻译添加到此函数中，如下所示：

var zoom = d3.behavior.zoom()
             .translate([0, 0])
             .scale(1).scaleExtent([1, 3])
             .on("zoom", 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]);
            }
        });
    }

---

我希望这对你有帮助

请注意，

zoom.translate（）

返回当前的平移向量，它可能不会与位置混淆。