d3.js实现svg缩放功能
本文代码转载自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 2020-04-21
Arduino机器人 2020-04-13
天堂里的雪 2019-11-15
qinbiao00 2014-12-10
yxy 2014-12-10
csscode 2019-06-29
chongxiaocheng 2015-01-24
风萧萧梦潇 2014-08-01
Phoebe的学习天地 2013-11-15
jianqi 2019-06-21
小白的黑科技 2014-10-15
maple00 2011-03-30
每天积累一点点 2011-03-10
AndroidGA 2011-09-07
qinxu 2010-10-25
xxhy 2010-10-23
Techzero 2017-08-29