使用d3.js的时候，如何用zoom translate scale限制拖拽范围

Posted 2021-03-06 dawn888

红色代表需要改写的代码

1.添加定义图像大小和容器的大小及坐标

d3.behavior.zoom = function () {

      var moveCanvas={

          width: 0, height: 0,

          cx:0,cy:0,cwidth:0,cheight:0

      };

    var view = {

      x: 0,

      y: 0,

      k: 1

    }, translate0, center0, center, size = [ 960, 500 ], scaleExtent = d3_behavior_zoomInfinity, duration = 250, zooming = 0, mousedown = "mousedown.zoom", mousemove = "mousemove.zoom", mouseup = "mouseup.zoom", mousewheelTimer, touchstart = "touchstart.zoom", touchtime, event = d3_eventDispatch(zoom, "zoomstart", "zoom", "zoomend"), x0, x1, y0, y1;

    if (!d3_behavior_zoomWheel) {

      d3_behavior_zoomWheel = "onwheel" in d3_document ? (d3_behavior_zoomDelta = function() {

        return -d3.event.deltaY * (d3.event.deltaMode ? 120 : 1);

      }, "wheel") : "onmousewheel" in d3_document ? (d3_behavior_zoomDelta = function() {

        return d3.event.wheelDelta;

      }, "mousewheel") : (d3_behavior_zoomDelta = function() {

        return -d3.event.detail;

      }, "MozMousePixelScroll");

 

    }

 

2.添加定义设置参数方法

 

zoom.y = function(z) {

      if (!arguments.length) return y1;

      y1 = z;

      y0 = z.copy();

      view = {

        x: 0,

        y: 0,

        k: 1

      };

      return zoom;

    };

 zoom.moveCanvas = function (_) {

 

        if (!arguments.length) return [moveCanvas.width, moveCanvas.height, moveCanvas.cx, moveCanvas.cy, moveCanvas.cwidth, moveCanvas.cheight];

        moveCanvas = {

            width: +_[0],//图像宽度

            height: +_[1],//图像高度

            cx: +_[2],//容器坐标x

            cy: +_[3],//容器坐标y

            cwidth: +_[4],//容器宽度

            cheight: +_[5],//容器高度

        };

        return zoom;

    };

 

3.重写translateTo方法

    function scaleTo(s) {

      view.k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], s));

    }

    function translateTo(p, l) {

      l = point(l);

      view.x += p[0] - l[0];

      view.y += p[1] - l[1];

      var minx = moveCanvas.cx - view.k * moveCanvas.width / 2;//图像的一半

      var maxx = moveCanvas.cx + moveCanvas.cwidth - moveCanvas.width / 2*view.k;

      var miny = moveCanvas.cy - view.k * moveCanvas.height / 2;//图像的一半

      var maxy = moveCanvas.cy + moveCanvas.cheight - moveCanvas.height / 2*view.k;

      if (view.x < minx) view.x = minx;

      if (view.y < miny) view.y = miny;

      if (view.x > maxx) view.x = maxx;

      if (view.y > maxy) view.y = maxy;

    }

 

4.页面调用

 var zoom = d3.behavior.zoom()

                                    .scaleExtent([0.5, 2])

                                    .moveCanvas([svgWidth,svgHeight,0,0,divWidth,divHeight])

                                    .on("zoom", function (d) {

                                        sval = d3.event.scale;

                                        console.info("transform");

                                        gMap.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")")

                                    });