From 0860d815a2aa256faa1778135f7acbd72f5bbfc1 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 12 Sep 2022 10:34:57 -0400
Subject: [PATCH] zoom

---
 app.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app.js b/app.js
index 1ce8712..1511287 100644
--- a/app.js
+++ b/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);