fix zoom then add bug, use exit to remove circles

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
+	const circles = d3.select('#points')
-	d3.select('#points').selectAll('circle') //add circles to #points group, not svg
+		.selectAll('circle') //add circles to #points group, not svg
-		.data(runs)
+		.data(runs, (datum)=>{
-		.enter()
+			return datum.id
-		.append('circle');    
+		})
+	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
+	let x = event.offsetX;
-	const y = event.offsetY; //gets the y position of the mouse relative to the svg element
+	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)));