zooming

D3.md

@@ -241,16 +241,17 @@ You can use the xScale.invert and yScale.invert to get data from d3.event.x and
 ### Zooming
 
 ```javascript
-//generator for a behavior
+//previously defined: var xAxis = d3.axisBottom(xScale);
-//scale from 1 - 10
+//previously defined: var yAxis = d3.axisLeft(yScale);
-//.on function says, when there's an event of type 'zoom', call the 'zoomed' function.  Could be any event
+//previously defined: d3.select('svg').append('g').attr('id', 'x-axis').attr('transform', 'translate(0,' + HEIGHT + ')').call(xAxis);
-var zoom = d3.behavior.zoom().scaleExtent([1,10]).on('zoom', zoomed);
+//previously defined: d3.select('svg').append('g').attr('id', 'y-axis').call(yAxis); //y axis is good as it is
-var svg = d3.select('#viz-wrapper').append('svg').call(zoom);
+var zoomCallback = function(){
-function zoomed(){
+	d3.select('#points').attr("transform", d3.event.transform);
-	console.log(d3.event.translate);//get mouse position
+	d3.select('#x-axis').call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
-	console.log(d3.event.scale);//bounded by 1,10 as set up above
+	d3.select('#y-axis').call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
-	viz.attr('transform', 'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')');
 }
+var zoom = d3.zoom().on('zoom', zoomCallback);
+d3.select('svg').call(zoom);
 ```
 
 ## Basic Layouts