🏠 back to Observable

Highlight selected node in collapsible tree

Hi and happy new year to you all.

I forked d3-collapsible-tree and I wanted to highlight the selected node with a mutable selection:

mutable selection = null
function nodeClicked(node){
  mutable selection = node
}
....
nodeEnter.append("circle")
    .attr("r", 2.5)
    .style('fill', d=> selection&&d.id===selection.id?'orange':'black')

https://observablehq.com/@nicolas-despres/collapsible-tree

It show the selected node in orange but the tree does not collapse/expand anymore. I don’t understand the issue.

Any idea?

Thanks

Is causing the problem. I tried combining the two fills but still freaks out.

.attr('fill', d=> (d.id===selection.id)?'orange':d._children ? "#555" : "#999")

It’s odd (to me) that it’s doing a complete redraw.

Ok thanks for the reply. I managed to do it differently by setting a state inside the data tree itself rather than externally in the selection.
Regards

1 Like