From 93466db16f2bc5dce566377c9158fc9e86336d81 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Mon, 12 Sep 2022 11:00:11 -0400 Subject: [PATCH] Update SCATTER_PLOT.md --- SCATTER_PLOT.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/SCATTER_PLOT.md b/SCATTER_PLOT.md index 45bbd0c..14a3fe8 100644 --- a/SCATTER_PLOT.md +++ b/SCATTER_PLOT.md @@ -1201,7 +1201,7 @@ change it to this: ```javascript d3.select('#points').html(''); -var circles = d3.select('#points') +const circles = d3.select('#points') .selectAll('circle') .data(runs); circles.enter().append('circle'); @@ -1220,7 +1220,7 @@ If we click on the middle circle (2nd), it deletes the 2nd "run" object in the ` To avoid these affects, we need to make sure that each circle stays with the data it used to be assigned to when we call `render()`. To do this, we can tell D3 to map `` to datum by id, rather than index in the array. At the top of the `render()` function, find this code: ```javascript -var circles = d3.select('#points') +const circles = d3.select('#points') .selectAll('circle') .data(runs); ``` @@ -1228,11 +1228,11 @@ var circles = d3.select('#points') Change it to this: ```javascript -var circles = d3.select('#points') - .selectAll('circle') - .data(runs, function(datum){ - return datum.id - }); +const circles = d3.select('#points') + .selectAll('circle') + .data(runs, (datum)=>{ + return datum.id + }); ``` This tells D3 to use the `id` property of each "run" object when determining which `` element to assign the data object to. It basically assigns that `id` property of the "run" object to the `` element initially. That way, when the 2nd "run" object is deleted, `circles.exit().remove();` will find the circle that had the corresponding id (the middle circle) and remove it.