I have this function to highlight nodes in tree :
function highlightInTree(data) {
d3.selectAll('.node').selectAll('circle').style('fill', 'white')
console.log(data)
//get all the nodes
let nodes = d3.selectAll(".node")[0];
console.log(nodes);
//loop through the keys in the data
for (key in data) {
//loop through the nodes
nodes.forEach((f) => {
//if the node name is === the key name
if (f.__data__.name === key) {
//compare the threshold to the data
if (data[key] < f.__data__.thresholds){
//if the data is below the threshold highlight the right side fals
//filter the nodes based on the children of this node by name and depth
let filterednodes = nodes.filter((fil) => {
return fil.__data__.name == f.__data__.children[1].name &&
fil.__data__.depth == f.__data__.children[1].depth;
});
filterednodes.forEach((node) => {
d3.select(node).select('circle').style("fill", "red")
});
}
else {
console.log(key);
console.log(data[key]);
console.log('true');
let filterednodes = nodes.filter((fil) => {
return fil.__data__.name == f.__data__.children[0].name &&
fil.__data__.depth == f.__data__.children[0].depth;
});
filterednodes.forEach((node) => {
d3.select(node).select('circle').style("fill", "red")
});
}
}else {
}
})
}
}
this is highlighting correct but it's not highlighting the first node(which should obviously be highlighted every time) and the biggest issue that I am struggling to fix is that it is not stopping after it has ended in a node either true or false. As can be seen in the picture below the last two levels of the tree shouldn't be checked in the loop and shouldn't be highlighted because the datapoint has already ended up in true on the second level. Here is my code, any help or suggestion how to fix this bug would be highly appreciated.