D3.JS implementation graphic zoom translation

The example of this article shared D3.js to implement the specific code of graphical scaling, for reference, the specific content is as follows

          VAR Width = 400, Height = 400; var circles = [{CX: 150, CY: 200, R : 30}, {CX: 250, CY: 200, R: 30}] var svg = d3.select ("body"). Append ("svg") .attr ("width", width) .attr ("Height ", height) // Defines the zoom function var zoom = D3.Behavior.ZOOM (). Scaleextent ([1, 10]) // Used to set the minimum and maximum scales .on (" zoom ", zoomed) // Draw VAR g = svg.Append ("g") .call (zoom) .Selectall ("circles) .Enter () .append (" circle ") .attr (" cx ", function d) {return d.cx}) .attr ("cyction (d) {return d.cy}) .attr (" r ", function (d) {return dr}) .attr (" fILL "," Black "function zoomed () {g.attr (" Transform "," + D3.Event.Translate + ") Scale (" + D3.Event.scale + ")")} // D3. Event.translate is a pan-coordinate value, D3.Event.scale is a zoom value.      The above is all the contents of this article, I hope to help everyone, and I hope everyone will support Tumi Cloud.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment