From ddb0138cbab942648689176c90d2c8214b791520 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 12 Sep 2022 11:01:35 -0400
Subject: [PATCH] fix zoom then add bug, use exit to remove circles

---
 app.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/app.js b/app.js
index 1511287..c5cc2fa 100644
--- a/app.js
+++ b/app.js
@@ -41,11 +41,13 @@ yScale.domain(yDomain);
 const render = () => {
 
 	//adjust the code at the top of your render function
-	d3.select('#points').html(''); //clear out all circles when rendering
-	d3.select('#points').selectAll('circle') //add circles to #points group, not svg
-		.data(runs)
-		.enter()
-		.append('circle');    
+	const circles = d3.select('#points')
+		.selectAll('circle') //add circles to #points group, not svg
+		.data(runs, (datum)=>{
+			return datum.id
+		})
+	circles.enter().append('circle');
+	circles.exit().remove();
 
 	d3.selectAll('circle').data(runs)
 		.attr('cy', (datum, index) => {
@@ -121,8 +123,12 @@ const createTable = () => {
 createTable();
 
 d3.select('svg').on('click', (event) => {
-	const x = event.offsetX; //gets the x position of the mouse relative to the svg element
-	const y = event.offsetY; //gets the y position of the mouse relative to the svg element
+	let x = event.offsetX;
+	let y = event.offsetY;
+	if(lastTransform !== null){
+		x = lastTransform.invertX(event.offsetX);
+		y = lastTransform.invertY(event.offsetY);
+	}
 
 	const date = xScale.invert(x) //get a date value from the visual point that we clicked on
 	const distance = yScale.invert(y); //get a numeric distance value from the visual point that we clicked on
@@ -137,7 +143,9 @@ d3.select('svg').on('click', (event) => {
 	render(); //add this line
 });
 
+let lastTransform = null; //add this
 const zoomCallback = (event) => {
+	lastTransform = event.transform; //add this
 	d3.select('#points').attr("transform", event.transform);
 	d3.select('#x-axis')
 		.call(bottomAxis.scale(event.transform.rescaleX(xScale)));