zoom

app.js

@@ -98,12 +98,14 @@ render();
 const bottomAxis = d3.axisBottom(xScale); //pass the appropriate scale in as a parameter
 d3.select('svg')
 	.append('g') //put everything inside a group
+	.attr('id', 'x-axis') //add an id
 	.call(bottomAxis) //generate the axis within the group
 	.attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom
 
 const leftAxis = d3.axisLeft(yScale);
 d3.select('svg')
 	.append('g')
+	.attr('id', 'y-axis') //add an id
 	.call(leftAxis); //no need to transform, since it's placed correctly initially
 
 const createTable = () => {
@@ -135,3 +137,13 @@ d3.select('svg').on('click', (event) => {
 	render(); //add this line
 });
 
+const zoomCallback = (event) => {
+	d3.select('#points').attr("transform", event.transform);
+	d3.select('#x-axis')
+		.call(bottomAxis.scale(event.transform.rescaleX(xScale)));
+	d3.select('#y-axis')
+		.call(leftAxis.scale(event.transform.rescaleY(yScale)));
+}
+const zoom = d3.zoom()
+	.on('zoom', zoomCallback);
+d3.select('svg').call(zoom);