使用d3.js的时候,如何用zoom translate scale限制拖拽范围
2021-04-08 08:27
标签:cti 设置 OLE tran 高度 for dispatch transform nbsp 红色代表需要改写的代码 1.添加定义图像大小和容器的大小及坐标 2.添加定义设置参数方法 3.重写translateTo方法 4.页面调用 使用d3.js的时候,如何用zoom translate scale限制拖拽范围 标签:cti 设置 OLE tran 高度 for dispatch transform nbsp 原文地址:https://www.cnblogs.com/smedas/p/12461478.htmld3.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");
}
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;
};
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;
if (view.y miny;
if (view.x > maxx) view.x = maxx;
if (view.y > maxy) view.y = maxy;
}
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 + ")")
});
文章标题:使用d3.js的时候,如何用zoom translate scale限制拖拽范围
文章链接:http://soscw.com/index.php/essay/72787.html