For a while, I've been utilizing the CollapsibleTree Search by Patrick Brockmann with d3 v3.5. This search function fills a Select2 with tree leaves that can be used to locate and highlight a specific leaf node in red.
Currently, I am attempting to make it compatible with d3 v5.
I've managed to populate the Select2 successfully, but when selecting a leaf from the dropdown, all tree leaves expand and no highlighting takes place upon selection.
Please note: If you collapse the tree and then manually expand it, you can observe the highlighted nodes and path... so it's somewhat functioning, though I assume it's not collapsing nodes where d.class !== "found".
function collapseAllNotFound( d ) {
if ( d.children ) {
if ( d.class !== "found" ) {
d._children = d.children;
d._children.forEach( collapseAllNotFound );
d.children = null;
} else
d.children.forEach( collapseAllNotFound );
}
}
Check out the JSFiddle demo
Full code:
$("#search").select2("val", "");
var treeData =
{
"name": "Top Level",
"children": [
{
"name": "A",
"children": [
{ "name": "A1", "type": "unit" },
{ "name": "A2", "type": "unit" },
{ "name": "A3", "type": "unit" },
{ "name": "A4", "type": "unit" },
{ "name": "A5", "type": "unit" },
{ "name": "A6", "type": "unit" },
]
},
{ "name": "B",
"children": [
{ "name": "B1", "type": "unit" },
{ "name": "B2", "type": "unit" },
{ "name": "B3", "type": "unit" },
{ "name": "B4", "type": "unit" },
{ "name": "B5", "type": "unit" },
{ "name": "B6", "type": "unit" },
]
}
]
};
var colourScale = d3.scaleOrdinal()
.domain(["Top Level", "A", "B"])
.range(["#abacab", "#53e28c", "#4b80fa"]);
// Other functions and data omitted for brevity...