scale axes when zooming

app.js

@@ -91,12 +91,14 @@ render();
 var bottomAxis = d3.axisBottom(xScale);
 d3.select('svg')
 	.append('g')
+    .attr('id', 'x-axis')
 	.call(bottomAxis)
     .attr('transform', 'translate(0,'+HEIGHT+')');
 
 var leftAxis = d3.axisLeft(yScale);
 d3.select('svg')
 	.append('g')
+    .attr('id', 'y-axis')
 	.call(leftAxis);
 
 var createTable = function(){
@@ -131,6 +133,8 @@ d3.select('svg').on('click', function(){
 
 var zoomCallback = function(){
 	d3.select('#points').attr("transform", d3.event.transform);
+    d3.select('#x-axis').call(bottomAxis.scale(d3.event.transform.rescaleX(xScale)));
+	d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(yScale)));
 }
 var zoom = d3.zoom().on('zoom', zoomCallback);
 d3.select('svg').call(zoom);