Вы можете использовать BALKANGraph библиотека диаграмм javascript для достижения требуемой функциональности
OrgChart JS поддерживает расширение / свертывание
Я не уверен, что именно вы хотите выделить, нов демонстрационном примере только родительский узел выделен, вы можете использовать его в качестве отправной точки для реализации своей собственной логики
OrgChart.templates.sentence = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.sentence.size = [520, 120];
OrgChart.templates.sentence.field_0 = '<text class="field_0" style="font-size: 24px;" fill="#ffffff" x="260" y="90" text-anchor="middle">{val}</text>';
OrgChart.templates.sentence.field_1 = '<text class="field_1" style="font-size: 16px;" fill="#ffffff" x="500" y="30" text-anchor="end">{val}</text>';
OrgChart.templates.sentence.node = '<rect x="0" y="0" height="120" width="520" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect>';
var chart = new OrgChart(document.getElementById("tree"), {
nodeBinding: {
field_0: "type",
field_1: "text"
},
orientation: BALKANGraph.orientation.top_left,
tags: {
"sentence": {
template: "sentence"
}
},
links: [
{ from: 2, to: 1 },
{ from: 3, to: 1 },
{ from: 4, to: 3 },
{ from: 5, to: 3 },
{ from: 6, to: 5 },
{ from: 7, to: 5 }
],
nodes: [
{ id: 1, text: "I want a dog with long hair", type:"SENTENCE", tags: ["sentence"] },
{ id: 2, text: "I", type: "SUB" },
{ id: 3, text: "want a dog with long hair", type: "PRD" },
{ id: 4, text: "want", type: "VERB" },
{ id: 5, text: "a dog with long hair", type: "OBJ" },
{ id: 6, text: "a dog", type: "HED" },
{ id: 7, text: "with long hair", type: "PP" }
]
});
var nodeEelements = chart.getNodeElements();
for (var i = 0; i < nodeEelements.length; i++) {
nodeEelements[i].addEventListener("mouseover", function () {
this.classList.add("highlight");
var nodeId = this.getAttribute("node-id");
var parent = chart.nodes[nodeId].parent;
if (parent != null) {
chart.getNodeElement(parent.id).classList.add("highlight");
}
});
nodeEelements[i].addEventListener("mouseleave", function () {
this.classList.remove("highlight");
var nodeId = this.getAttribute("node-id");
var parent = chart.nodes[nodeId].parent;
if (parent != null) {
chart.getNodeElement(parent.id).classList.remove("highlight");
}
});
}
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
font-family: Helvetica;
}
#tree {
width: 100%;
height: 100%;
}
.highlight rect{
fill: #F57C00 !important;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"></div>