縮放（Zoom）是另一種重要的可視化操作，主要是使用鼠標的滾輪進行。 ## 1. zoom 的定義 縮放是由 d3.behavior.zoom() 定義的。 ~~~ var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); } ~~~ 第 2 行：scaleExtent 用于設置最小和最大的縮放比例 第 3 行：當 zoom 事件發生時，調用 zoomed 函數 第 5 - 8 行：zoomed 函數，用于更改需要縮放的元素的屬性，d3.event.translate 是平移的坐標值，d3.event.scale 是縮放的值。 ## 2. 繪制圓 與【[進階 - 第 6.0 章](http://www.ourd3js.com/wordpress/?p=714)】一樣，繪制兩個圓用于測試。只是將圓 circle 元素添加到一個組 g 里，g 元素調用 call(zoom)，zoom 為剛才定義的縮放行為。 ~~~ var circles_group = svg.append("g") .call(zoom); circles_group.selectAll("circle") .data(circles) .enter() .append("circle") .attr("cx",function(d){ return d.cx; }) .attr("cy",function(d){ return d.cy; }) .attr("r",function(d){ return d.r; }) .attr("fill","black"); ~~~ ## 3. 結果 結果如下，在圓上滑動鼠標滾輪試試： 源代碼單擊以下鏈接后查看： [http://www.ourd3js.com/demo/J-6.1/zoom.html](http://www.ourd3js.com/demo/J-6.1/zoom.html) 謝謝閱讀。 ### 文檔信息 - 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND） - 發表日期：2014 年 12 月 28?日 - 更多內容：[OUR D3.JS - 數據可視化專題站](http://www.ourd3js.com/) 和 [CSDN個人博客](http://blog.csdn.net/lzhlzz) - 備注：本文發表于 [OUR D3.JS](http://www.ourd3js.com/) ，轉載請注明出處，謝謝