d3.js实现svg缩放功能
hermanncain 2019-06-21
本文代码转载自Stack Overflow，通过d3.js实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对d3感兴趣的小伙伴可以参考下面代码。
JSFiddle地址: Demo online
看本帖前最好掌握如下技术：
js/css基本知识d3.js语法比较类似jqueryhtml5 svg画图标签
d3.behavior.zoom()
该行为会自动在容器元素中创建事件监听器来处理元素的缩放和平移动作，可支持鼠标事件和触摸事件。
构造一个新的缩放行为。构造之后，可以通过selection.call()将此行为应用于选择器：
var zoom = d3.behavior.zoom(); selection.call(zoom);
所有注册的监听器都使用 "zoom" 命名空间, 故如下可以移除缩放行为:
selection.on(".zoom", null);zoom(selection)
应用缩放行为到指定的选择器 selection，注册所需的事件监听器，支持缩放和拖拽行为。
zoom.translate([translate])
指定当前的缩放平移向量为translate；如果未指定translate，返回当前平移向量，默认：[0, 0]。
zoom.scale([scale])
指定当前的缩放比例，如果未指定scale，则返回当前的缩放比例，默认为1
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Zoom + Pan</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.overlay {
fill: none;
pointer-events: all;
}
button {
padding: 10px 20px;
}
</style>
<body>
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
<script>
var width = 960,
height = 500;
var randomX = d3.random.normal(width / 2, 80),
randomY = d3.random.normal(height / 2, 80);
var data = d3.range(2000).map(function() {
return [randomX(), randomY() ];
});
var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.call(zoom)
.append("g");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height);
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("r", 2.5)
.attr("transform", function(d) { return "translate(" + d + ")"; });
function zoomed() {
svg.attr("transform",
"translate(" + zoom.translate() + ")" +
"scale(" + zoom.scale() + ")"
);
}
function interpolateZoom (translate, scale) {
var self = this;
return d3.transition().duration(350).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();
};
});
}
function zoomClick() {
var clicked = d3.event.target,
direction = 1,
factor = 0.2,
target_zoom = 1,
center = [width / 2, height / 2],
extent = zoom.scaleExtent(),
translate = zoom.translate(),
translate0 = [],
l = [],
view = {x: translate[0], y: translate[1], k: zoom.scale()};
d3.event.preventDefault();
direction = (this.id === 'zoom_in') ? 1 : -1;
target_zoom = zoom.scale() * (1 + factor * direction);
if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; }
translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
view.k = target_zoom;
l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];
view.x += center[0] - l[0];
view.y += center[1] - l[1];
interpolateZoom([view.x, view.y], view.k);
}
d3.selectAll('button').on('click', zoomClick);
</script> 
相关推荐
wuzaiwuzai 0喜欢 / 0评论 2020-04-21
Arduino机器人 0喜欢 / 0评论 2020-04-13
天堂里的雪 0喜欢 / 0评论 2019-11-15
qinbiao00 0喜欢 / 0评论 2014-12-10
yxy 0喜欢 / 0评论 2014-12-10
csscode 0喜欢 / 0评论 2019-06-29
chongxiaocheng 0喜欢 / 0评论 2015-01-24
风萧萧梦潇 0喜欢 / 0评论 2014-08-01
Phoebe的学习天地 0喜欢 / 0评论 2013-11-15
jianqi 0喜欢 / 0评论 2019-06-21
小白的黑科技 0喜欢 / 0评论 2014-10-15
郭文睿 0喜欢 / 0评论 2011-05-23
maple00 0喜欢 / 0评论 2011-03-30
每天积累一点点 0喜欢 / 0评论 2011-03-10
AndroidGA 0喜欢 / 0评论 2011-09-07
qinxu 0喜欢 / 0评论 2010-10-25
xxhy 0喜欢 / 0评论 2010-10-23
Techzero 0喜欢 / 0评论 2017-08-29
mengyun00 0喜欢 / 0评论 2019-04-20
CeiWCJ 0喜欢 / 0评论 2013-02-04
pythoncream 0喜欢 / 0评论 2018-11-16
hanshou0 0喜欢 / 0评论 2008-10-18
开往幸福列车 0喜欢 / 0评论 2007-04-11
PHP100 0喜欢 / 0评论 2019-03-27
PHP100 0喜欢 / 0评论 2019-03-27
网络游戏 0喜欢 / 0评论 2017-04-20
互联网那些事 0喜欢 / 0评论 2017-01-18
Jscript 0喜欢 / 0评论 2016-10-14
Javascript 0喜欢 / 0评论 2016-10-12