使用d3.js的时候,如何用zoom translate scale限制拖拽范围
红色代表需要改写的代码
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限制拖拽范围的更多相关文章
- 【 D3.js 入门系列 --- 4 】 如何使用scale(比例)
在上一节中使用了一个很重要的概念 — scale (这个不知道翻译成什么,暂且叫它比例).本节将重点介绍它的相关使用方法. 在介绍 scale 之前,先介绍两个经常和 scale 一起出现的函数,在上 ...
- 【 D3.js 入门系列 --- 4 】 怎样使用scale(比例)
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在上一节中使用了一个非常重要的概念 - scale (这个不知道 ...
- AngularJS之拖拽排序(ngDraggable.js)
ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元 ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- D3.js 力导向图的拖拽(drag)与缩放(zoom)
不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- D3.js使用过程中的常见问题(D3版本D3V4)
目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...
- 前端使用d3.js调用地图api 进行数据可视化
前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化.其实就是使用了第三方插件,比现在比较火的可视化插件d3.js echart.js.大致思路就是,把要用到的位置的geojso ...
- 基于cytoscape.js 、 d3.js实现的关系图谱初级版本
前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...
随机推荐
- 原来rollup这么简单之 rollup.watch篇
大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 大家的支持是我创作的动力. 计划 rollup系列打算一章一章的放出 ...
- 简单java队列
队列是一种特殊的线性表,它只允许在表的前端进行删除操作,而在表的后端进行插入操作. LinkedList类实现了Queue接口,因此我们可以把LinkedList当成Queue来用. 以下实例演示了队 ...
- python之道14
看代码写结果: def wrapper(f): def inner(*args,**kwargs): print(111) ret = f(*args,**kwargs) print(222) ret ...
- OpenCV-Python 形态学转换 | 十七
目标 在这一章当中, 我们将学习不同的形态学操作,例如侵蚀,膨胀,开运算,闭运算等. 我们将看到不同的功能,例如:cv.erode(),cv.dilate(), cv.morphologyEx()等. ...
- Qt 事件使用示例 (一)
Qt 事件使用示例,以一个常见的使用来说明:QLabel 当鼠标滑过时改变颜色. 事先说明要想实现这一功能有很多种方法,如Qss实现,本文使用Qt事件的方式来实现. 第一步,我们得实现一个从QLabe ...
- LoardPe与Import REC X64dbg脚本 脱壳 Upx
目录 LoardPe与Import REC X64dbg脚本 脱壳 Upx 一丶X64dbg调试器与脚本 1.1 起因 1.2 脚本的调试 1.3 Upx脱壳脚本 二丶LoardPe 内存Dump与I ...
- Python python 数据类型的相互转换
# number 之间的相互转换 # int <=> float var1 = 1; print(type(var1)) #<class 'int'> res1 = float ...
- shell大全
1.shell判断文件是否存在 http://www.cnblogs.com/sunyubo/archive/2011/10/17/2282047.html
- Hadoop调试记录(1)
错误 ERROR: Can't get master address from ZooKeeper; znode data == null 解决 关闭hadoop,发现stop-all.sh后几个进程 ...
- EXPLAIN 查看 SQL 执行计划
EXPLAIN 查看 SQL 执行计划.分析索引的效率: id:id 列数字越大越先执行: 如果说数字一样大,那么就从上往下依次执行,id列为null的就表是这是一个结果集,不需要使用它来进行查询. ...