本文代码转载自StackOverflow。通过d3.js实现缩放很简单，但是想要通过滚轮和按钮实现完美缩放就没那么容易了。如果你对d3感兴趣，可以参考下面的代码。JSFiddle地址：Demoonline阅读本帖前最好掌握以下技术：js/css基础知识d3.js语法类似于jqueryhtml5svg绘图标签d3.behavior.zoom()这种行为会自动创建一个事件监听器在容器元素处理元素的缩放和平移，并支持鼠标事件和触摸事件。构造新的缩放行为。构造完成后，可以通过selection.call()将此行为应用于选择器：varzoom=d3.behavior.zoom();selection.call(zoom);所有已注册的侦听器都使用“zoom”命名空间，因此可以删除缩放行为，如下所示：selection.on(".zoom",null);zoom(selection)将缩放行为应用于指定的选择器选择，注册所需的事件侦听器，并支持缩放和拖动行为。zoom.translate([translate])指定当前缩放平移向量为translate；如果未指定翻译，则返回当前翻译向量，默认值：[0,0]。zoom.scale([scale])指定当前缩放比例，如果没有指定scale，返回当前缩放比例，默认为1index.html缩放+平移+-<脚本>var宽度=960，高度=500；varrandomX=d3.random.normal(width/2,80),randomY=d3.random.normal(height/2,80);vardata=d3.range(2000).map(function(){return[randomX(),randomY()];});varzoom=d3.behavior.zoom().scaleExtent([1,8]).on（“缩放”，缩放）；varsvg=d3.select（“body”）.append（“svg”）.attr（“宽度”，宽度）.attr（“高度”，高度）.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+")";});functionzoomed(){svg.attr("transform","translate("+zoom.translate()+")"+"scale("+zoom.scale()+")");}functioninterpolateZoom(translate,scale){varself=this;returnd3.transition().duration(350).tween("zoom",function(){variTranslate=d3.interpolate(zoom.translate(),翻译),iScale=d3.interpolate(zoom.scale(),scale);返回函数(t){zoom.scale(iScale(t)).translate(iTranslate(t));zoomed();};});}functionzoomClick(){varclicked=d3.event.target,direction=1,factor=0.2,target_zoom=1,center=[width/2,height/2],extent=zoom.scaleExtent(),translate=zoom.翻译（），翻译0=[]，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);如果（target_zoomextent[1]）{returnfalse;}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);
