How to stop a for loop once you are in a leaf node as True or False in a tree

Question

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.

Answer 1

I have updated the function to highlight the node

Basically you were iterating nodes array multiple time inside data object loop. Instead of that you can use the recusrive function which would highlight the each node.

    // recusrive function to highlight the node
    // it takes 3 arguments : nodeData -- node data, scatterPlot hover data, list of nodes
    function highlightNode(nodeData, scatterData, nodes){
      // highlight the node using id; here node position can be found using id-1 = position of node in nodes array
        d3.select(nodes[nodeData.id-1]).select('circle').style("fill", "red");

      //check if children available and compare node thresholds with current threshold  

      //if less than current threshold than highlight left side node
        if (nodeData.children && nodeData.thresholds <= scatterData[nodeData.name]){

        highlightNode(nodeData.children[0], scatterData, nodes);
      }
      //if greater than current threshold than highlight right side node
      else if(nodeData.children && nodeData.thresholds > scatterData[nodeData.name]){
        highlightNode(nodeData.children[1], scatterData, nodes);
      }
    }

You can check the working fiddle here

Check whether it fulfil your purpose or not.