红色代表需要改写的代码

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

d3.behavior.zoom = function () {

      var moveCanvas={

          width: , height: ,

          cx:,cy:,cwidth:,cheight:

      };

    var view = {

      x: ,

      y: ,

      k: 

    }, translate0, center0, center, size = [ ,  ], scaleExtent = d3_behavior_zoomInfinity, duration = , zooming = , 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 ?  : );

      }, "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: ,

        y: ,

        k: 

      };

      return zoom;

    };

 zoom.moveCanvas = function (_) {

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

        moveCanvas = {

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

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

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

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

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

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

        };

        return zoom;

    };

3.重写translateTo方法

    function scaleTo(s) {

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

    }

    function translateTo(p, l) {

      l = point(l);

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

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

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

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

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

      var maxy = moveCanvas.cy + moveCanvas.cheight - moveCanvas.height / *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, ])

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

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

                                        sval = d3.event.scale;

                                        console.info("transform");

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

                                    });

使用d3.js的时候,如何用zoom translate scale限制拖拽范围的更多相关文章

  1. 【 D3.js 入门系列 --- 4 】 如何使用scale(比例)

    在上一节中使用了一个很重要的概念 — scale (这个不知道翻译成什么,暂且叫它比例).本节将重点介绍它的相关使用方法. 在介绍 scale 之前,先介绍两个经常和 scale 一起出现的函数,在上 ...

  2. 【 D3.js 入门系列 --- 4 】 怎样使用scale(比例)

    本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在上一节中使用了一个非常重要的概念 - scale (这个不知道 ...

  3. AngularJS之拖拽排序(ngDraggable.js)

    ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元 ...

  4. 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  5. D3.js 力导向图的拖拽(drag)与缩放(zoom)

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  6. 【 D3.js 进阶系列 】 进阶总结

    进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...

  7. D3.js使用过程中的常见问题(D3版本D3V4)

    目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...

  8. 前端使用d3.js调用地图api 进行数据可视化

    前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化.其实就是使用了第三方插件,比现在比较火的可视化插件d3.js echart.js.大致思路就是,把要用到的位置的geojso ...

  9. 基于cytoscape.js 、 d3.js实现的关系图谱初级版本

    前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...

随机推荐

  1. SSL/TLS 安全测试

    本文介绍了使用半自动化工具执行SSL&TLS安全性评估的过程,以及如何使用手动及工具的测试方法验证并发现问题.目的是优化TLS和SSL安全测试流程,帮助信息安全顾问在渗透测试时在TLS / S ...

  2. 第二周Java实验作业

    实验二 Java基本程序设计(1) 实验时间 2018-9-6 1.实验目的与要求 (1)进一步熟悉命令行和IDE两种方式下java程序开发的基本步骤: (2)掌握Eclipse集成开发环境下导入Ja ...

  3. 安装RationalRose的问题解决

    列出大问题:在这一步无法进行下一步,直接就只能退出. 翻译过来的意思是:IBM安装程序被完全下载之前就终止了,大概是这个意思. 然后我就直接进了IBM的官网看了一下产品支持,上面解释说是组件clear ...

  4. java基本数据类型和引用数据类型的调用传递的区别

    (1)基本数据类型:就是进行了值的传递把一份数据拷贝了之后传递过去 (2)引用数据类型:实际上也是进行了数据拷贝然后传过去,实际上也是值传递,只不过传递过去的值和原有的值指向了同一个对象 所以在调用的 ...

  5. apache系统故障排查方案及相关操作知识

    apache系统故障排查方案及相关操作知识 1.查看系统开的apache服务在哪个端口监听,有几个apache在服务,它的初始pid是多少 netstat -alop |grep LISTEN |gr ...

  6. adb 之日志文件分析(五)

    一,logcat日志文件 1,addroid日志系统提供了记录和查看系统调试信息的功能,日志都是从各种软件和一些系统的缓冲区(内存)中记录下来的,缓冲区可以通过logcat命令来查看和使用 2,在开发 ...

  7. 一些数组笔记(C)

    0.数组名是一个指针,存放数组首元素地址,所以使用scanf()接受字符串输入时只用写上数组名,不用加&.数组名是常量不允许修改其值.数组只能定义的时候初始化,后期初始化会被认为是修改数组名的 ...

  8. Spring Boot整合Thymeleaf视图层

    目录 Spring Boot整合Thymeleaf Spring Boot整合Thymeleaf 的项目步骤 Thymeleaf 语法详解 Spring Boot整合Thymeleaf Spring ...

  9. vulnhub~MyExpense

    最近有点忙,这几天的vulnhub断更了,今天试着做了一下myexpense,当然想要一帆风顺是不可能的,哪怕是有别人的steps 和walkthrough.所以就遇到的坑总结如下: 一般套路就是nm ...

  10. 如何基于layui的laytpl实现数据绑定

    想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的 ...