Clearing And Updating Svg On Click

From the bl.ocks here, I am attempting to assign an on-click button that: Removes the current shapes, hopefully by a smooth transition. Depending on button click, returns the sele

Solution 1:

You can implement the remove function as follows:

functionremove() {
  var cellUpdate = cell.selectAll("rect")
  const length = cell.selectAll("rect").data().lengthvar cellExit = cellUpdate.transition()
    .delay(function(d, i) { return (length - i) * 7; })
    .duration(updateDuration)
    .attr("width", 0)
    .remove();
}

cellUpdate is the selection of the cells that you want to remove. The length can be retrieved from the number of data elements or the number of nodes in the group (for the example data() was used). After the selection is retrieved you can apply the desired transition with delayed duration on it width, opacity etc.

Here is a sample block that allows you to achieve the desired goal: https://blockbuilder.org/cstefanache/e3110f130394eb71b9adfb5060ef2b78