zoom/pan

public/app.js

@@ -1,5 +1,3 @@
-// TODO - change y axis to dropped
-// TODO - zoom/pan on graph
 const WIDTH = 800;
 const HEIGHT = 600;
 const parseTime = d3.timeParse("%B %e, %Y");
@@ -10,6 +8,8 @@ let highlighted = []
 let courses = []
 let metros = []
 let yAxis = 'outcomes'
+let bottomAxis;
+let leftAxis;
 
 const randomColor = ()=>{
 	const red = Math.floor(Math.random()*128) + 64;
@@ -130,14 +130,14 @@ const setupGraph = ()=>{
 }
 
 const createAxes = () => {
-	const bottomAxis = d3.axisBottom(xScale);
+	bottomAxis = d3.axisBottom(xScale);
 	d3.select('#container')
 		.append('g')
 		.attr('id', 'x-axis')
 		.call(bottomAxis)
 		.attr('transform', 'translate(0,'+HEIGHT+')');
 
-	const leftAxis = d3.axisLeft(yScale);
+	leftAxis = d3.axisLeft(yScale);
 	d3.select('#container')
 		.append('g')
 		.attr('id', 'y-axis')
@@ -260,4 +260,15 @@ window.onload = async ()=>{
 	renderPoints();
 	createFormSubmissionHandler();
 	createRadioButtonHanlders();
+	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('#container').call(zoom);
 }