Application for "D3.js Advanced Series-6.1" Scaling (zoom)

zooming (zoom) is another important visual operation, mainly using the mouse's scroll wheel.

1. Definition of Zoom

Scaling is defined by D3.behavior.zoom ().

var zoom = D3.behavior.zoom (). scaleextent ([1, ten]). On ("Zoom", zoomed), function zoomed () {circles_group.attr (" Transform "," translate ("+ d3.event.translate +") scale ("+ D3.event.scale +") ");

Line 2nd: scaleextent for setting the minimum and maximum zoom ratios

Line 3rd: Call the Zoomed function when the zoom event occurs

第5-8: The zoomed function, which changes the properties of the element that needs to be scaled, d3.event.translate is the coordinate value of the translation, and D3.event.scale is the scaled value.

2. Draw a Circle

As in "Advanced-Chapter 6.0", draw two circles for testing. Just add the circle circle element to a group G, the G element calls call (zoom) and zoom is the scaling behavior you just defined.

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. Results

As a result, slide the mouse wheel over the circle to try it out:

Source code click on the following link to view:

Http://www.ourd3js.com/demo/J-6.1/zoom.html

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Publication date: December 2014 28? Day
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

Application for "D3.js Advanced Series-6.1" Scaling (zoom)