From bc1f0ae6e0e0d3da6fdfe2ac4e20a9aa070c4481 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Tue, 16 Aug 2016 00:42:45 -0400
Subject: [PATCH] switching back to render which is called when deleting too

---
 public/js/app.js | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index 82fdf4d..1e6a586 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -36,7 +36,7 @@ d3.select('svg').on('click', function(d){
 	logRun({
 		date: date, 
 		distance: distance
-	}, addCircles);
+	}, render);
 });
 
 // Log a new run in the server
@@ -52,30 +52,34 @@ var logRun = function(runObject, callback){
 
 //Render circles
 //var dateParser = d3.time.format("%Y-%m-%d %H:%M:%S.%L +00:00");
-var addCircles = function(){
+var render = function(){
 	d3.json('/runs', function(error, data){
 		var circles = d3.select('svg').selectAll('circle')
-			.data(data).enter()
-			.append('circle').attr('r', 5);
-		circles.attr('cx', function(datum, index){
-			return xScale(new Date(datum.date));
-		});
-		circles.attr('cy', function(datum, index){
-			return yScale(datum.distance);
-		});
+			.data(data, function(d){
+				return d.id
+			});
+		circles
+			.enter()
+			.append('circle').attr('r', 5)
+			.attr('cx', function(datum, index){
+				return xScale(new Date(datum.date));
+			})
+			.attr('cy', function(datum, index){
+				return yScale(datum.distance);
+			});
+		circles.exit().remove();
 		attachDeleteHandler();
 	});
 };
 
-addCircles();
+render();
 
 //Attach click handler to circles
 var attachDeleteHandler = function(){
 	d3.selectAll('circle').on('click', function(d){
 		d3.event.stopPropagation();
-		d3.select(this).remove();
 		d3.xhr('/runs/'+d.id)
 			.header("Content-Type", "application/json")
-			.send('DELETE');
+			.send('DELETE', render);
 	});
 };