Link zu meinem Code (Plunker)

Ich entwickle ein Netzwerkdiagramm in D3.js Force-Layout für akademische Zwecke. Ich habe bisher einen Graphen programmiert, der Knoten und Kanten anzeigt. Ich habe ein Textfeld zur automatischen Vervollständigung in jquery, in das der Benutzer einen Knotennamen eingeben kann.

D3.js (Nur ein Teil des Codes. Vollständiger Code unter meinem Plunker-Link):

var force = d3.layout.force()
  .nodes(d3.values(nodes))
  .links(links)
  .size([width, height])
  .linkDistance(100)
  .charge(-1546)
  .on("tick", tick)
  .start();

var svg = d3.select("#schemio")
  .append('svg')
  .attr("width", width)
  .attr("height", height);

var link = svg.selectAll(".link")
  .data(force.links())
  .enter().append("line")
  .attr("class", "link");

var node = svg.selectAll(".node")
  .data(force.nodes())
  .enter().append("g")
  .attr("class", "node")
  .call(force.drag);

HTML:

<div class="ui-widget">
    <label for="tags">Filter: </label>
    <input id="tags">
</div>

Jquery (Autocomplete)

$(function() {
    $( "#tags" ).autocomplete({
      source: nodesArray
    });
});

Ich möchte eine Funktion, bei der, wenn ein Benutzer einen Knotennamen in das Filterfeld eingibt, alle anderen Knoten und Kanten im Diagramm entfernt werden müssen und nur dieser bestimmte Knoten und die direkt zugeordneten Knoten und Kanten (ein Sprung) beibehalten werden.

Beispiel

Wenn ich "Parent" in das Filterfeld eingebe, muss es alle anderen Knoten und Kanten entfernen und nur den "Parent" -Knoten und seine direkten untergeordneten Knoten (child1, child2, child3) beibehalten.

Was ist ein praktikabler Ansatz zum Filtern von Knoten und Kanten, wenn der Benutzer nach bestimmten Begriffen sucht?

Danke im Voraus