Change tree graph based on select input value - d3.js

Question

I am trying to make my tree graph respond based on the value that is selected in the input. I get it to work for the first selection but nothing happens when I put the selection back to "All" again.
I get the following error in the console:
I guess it is because when going to the selection some of the children are removed and thus not found anymore when putting it on the full selection but I am not sure how I could fix this.
See codepen
The code for the graph:
//Load data
const data = [
{
"name": "Top Level",
"parent": "null",
"value": 10,
"type": "black",
"level": "red",
"children": [
{
"name": "Level 2A",
"parent": "Top Level",
"value": 15,
"type": "grey",
"level": "red",
"children": [
{
"name": "Son of A",
"parent": "Level 2: A",
"value": 5,
"type": "steelblue",
"level": "orange"
},
{
"name": "Daughter of A",
"parent": "Level 2: A",
"value": 8,
"type": "steelblue",
"level": "red"
}
]
},
{
"name": "Level 2B",
"parent": "Top Level",
"value": 10,
"type": "grey",
"level": "green"
}
]
}
];
var margin = {top: 10, right: 10, bottom: 10, left: 50},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var tree = d3.cluster()
.size([height, width])
.size([height-margin.top-margin.bottom,width-margin.left-margin.right]);
//Create root
var root = d3.hierarchy(data[0], function(d) { return d.children;});
//Attach canvas element
var svg = d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 1000);
var g = svg
.append("g")
.attr('transform','translate('+ margin.left +','+ margin.right +')');
var link = g.selectAll(".link")
.data(tree(root).links())
.enter()
.append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) {return d.y;})
.y(function(d) {return d.x;}));
var node = g.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "link")
.attr("class", d =>
{ return "node" + (d.children ? " node--internal" : " node--leaf")})
.attr("transform", d =>
{ return "translate(" + d.y + ","+ d.x + ")" ; })
var text = g.selectAll("text")
.data(root.descendants())
.enter().append("text")
.text(d => d.data.name)
.attr("class", "label glow")
.attr('text-anchor', "start")
.attr("x", d => d.y)
.attr("y", d => d.x);
circle = node.append("circle")
.attr("r", 2.5)
//Select
var selections = ["All", "Level 2A", "Level 2B"]
d3.select("#selectButton")
.selectAll('myOptions')
.data(selections)
.enter()
.append('option')
.text(function (d) { return d; }) //
.attr("value", function (d) { return d; })
// SelectInput
d3.select("#selectButton").on("change", function(d){
selectedGroup = this.value
updateChart(selectedGroup, data)
})
//Update chart function
function updateChart(selection, data){
//Filter data
if(selection != "All"){
var selData = data[0].children.filter(d => d.name == selection);
} else {
var selData = data
}
console.log(selData)
var root = d3.hierarchy(selData[0], function(d) { return d.children;});
console.log(root)
//update chart
link
.data(tree(root).links())
.join()
.transition()
.duration(1000)
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) {return d.y;})
.y(function(d) {return d.x;})
);
text
.data(root.descendants())
.join()
.transition()
.duration(1000)
.attr('text-anchor', "start")
.attr("x", d => d.y)
.attr("y", d => d.x);
node
.data(root.descendants())
.join()
.transition()
.duration(1000)
.attr("class", "link")
.attr("class", d =>
{ return "node" + (d.children ? " node--internal" : " node--leaf")})
.attr("transform", d =>
{ return "translate(" + d.y + ","+ d.x + ")" ; })
circle
.data(root.descendants())
.join()
.transition()
.duration(1000)
.attr("r", 2.5)
};

Answer 1

To answer my own question. I had to set what exactly needs to happen upon enter(), update() and exit().
I changed from just joining:
link
.data(tree(root).links())
.join()
.transition()
.duration(1000)
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) {return d.y;})
.y(function(d) {return d.x;})
);
To:
var link = g
.selectAll(".link")
.data(tree(root).links())
.join(
(enter) =>
enter
.append("path")
.attr("class", "link")
.attr(
"d",
d3
.linkHorizontal()
.x(function (d) {
return d.y;
})
.y(function (d) {
return d.x;
})
),
(update) =>
update
.transition()
.duration(1000)
.attr("class", "link")
.attr(
"d",
d3
.linkHorizontal()
.x(function (d) {
return d.y;
})
.y(function (d) {
return d.x;
})
),
(exit) => exit.remove()
);
For the full working tree see:
https://codepen.io/nvelden/pen/jOxgoVj