D3手动缩放，如何设置翻译进行缩放 [英] D3 manually zoom,how to set the translate for zoom

问题描述

我需要手动进行转换，因为我知道d3缩放，缩放不会听我的手动缩放，所以在手动缩放后，当我使用鼠标拖动或鼠标滚轮滚动时，d3缩放将开始事件从以前的位置（翻译）和缩放值，d3放大存储，它是如此可怕的我的地图。所以我需要设置缩放翻译和缩放后我的手动缩放，我可以设置缩放，但我不知道设置缩放翻译的值。

I need to do a transition manually, as I know about d3 zoom, the zoom will not listen my manual zoom, so after manually zoom, when I use mouse to drag or mouse wheel to scroll, the d3 zoom will start event from the previous position(translate) and scale value that the d3 zoom stored, it is so terrible for my map. So I need to set the zoom translate and scale after my manual zoom, and I can set the zoom scale, but I don't know the value to set the 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

任何人都知道在我手动转换后，

Any one know the right zoom translate value after my transition manually ?Thanks!!!

推荐答案

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

The zoom scale and zoom translate are stored in your zoom object. I'm guessing you have a line of code that looks like:

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

您可以初次缩放和翻译值，这种类型的定义可以帮助您限制缩放缩放比例为1或缩放事件开始时进行初始平移。注意所有这些都是可选的，你可以使用这种定义：

You can initial scale and translate values for first time, This type of definition could help you to restrict zoom scale and initial translate if zoom scale is 1 or when zoom event start. Attention all of this are optional, you can just use this kind of definition:

var zoom = d3.behavior.zoom();

因此，从该对象获取扩展和翻译很简单：

So getting the scale and translate from that object is simple:

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

如果您寻找某种方法手动进行转换或手动进行缩放，函数：

If you looking for some method to do a transition manually or do a scale manually you have to use this function:

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 对于缩放事件，您可以添加您对此函数的翻译如下：

zoomed is a function I defined to call on zoom event, you can add your translate to this function looks like:

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

我希望这可以帮助你。

I hope this helps you out.

这篇关于D3手动缩放，如何设置翻译进行缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！